如何使jQuery MaskedInput插件的unmask()函数正常工作？

Question

我想在页面上有一个输入框，默认情况下应该是美国电话号码格式。如果用户点击复选框指定他们想要输入国际电话号码，我希望掩码被删除。

我尝试了多种方法，但至今没有成功。在当前项目中，我使用jQuery来隐藏/显示完全不同的输入框。但我不喜欢这个选项，想要更简单的方法。

我正在使用以下内容：

jQuery 1.4.1（即将升级到1.4.2）和jQuery.MaskedInput-1.2.2

<script type="text/javascript">
$(document).ready(function($) {
  if ($("#InternationalOfficePhone").attr('checked') == false) {
    $("#OfficePhone").mask("[phone]? x99999");
  }
});

$("#InternationalOfficePhone").click(function() {
  if ($("#InternationalOfficePhone").attr('checked') == true) {
    //$("#OfficePhone").mask(); //doesn't work
    //$("#OfficePhone").unmask(); //doesn't work
    $("#OfficePhone").unmask("[phone]? x99999"); //doesn't work
  } else {
    $("#OfficePhone").mask("[phone]? x99999");
  }
});
</script>

上述代码可以正确设置默认掩码，但无论我在InternationalOfficePhone的点击事件中尝试什么，它都无法移除掩码。

非常感谢您的帮助。

- Terry Nederveld

---

我遇到的错误出现在un/mask行，并返回“对象不支持此属性或方法”。 - Terry Nederveld

Answer 1

你不需要向 unmask 函数传递参数！ 只需不带参数使用即可正常工作。

$("#OfficePhone").unmask();

- Diego Mendes

---

确认！可以不带参数工作。但这应该是一条注释... - Chad

为什么这是问题的答案还需要评论呢？请问如此操作的目的是什么？ - Diego Mendes

已经有一个使用了unmask函数的答案，你的回答看起来好像是在这个答案的基础上进行的。 - Chad

当然不是，被接受的答案是错误的。Terry使用.unmask(parameter)，正确的答案是.unmask()。这就是为什么我作为一个新回答，那时我不能编辑别人的答案。 - Diego Mendes

被接受的答案并没有错，但参数并不是必需的。即使有参数，它仍然可以工作。但是，考虑到这一点，我还是给你的答案点了赞，因为它更正确。 - Chad

Answer 2

我已经成功地找出了能够使它正常工作的代码。下面是我现在使用的代码。

<script type="text/javascript">
$(function($) {
  $("#OfficePhone").mask("[phone]? x99999");
  $("#InternationalOfficePhone").click(function() {
    var mask = "[phone]? x99999";
    if ($("#InternationalOfficePhone").is(':checked')) {
      $("#OfficePhone").unmask(mask);
    } else {
      $("#OfficePhone").mask(mask);
    }
  });
});
</script>

- Terry Nederveld

---

.unmask() 工作得非常好。这就是我所需要的，谢谢。但正如Diego的答案所指出的那样，您不需要向函数传递参数。 - Chad

这个还适用于maskedInput 1.4.1吗？我发现.unmask()和.unmask(maskString)都不能从字段中删除功能或从值中删除插入的掩码字符。如下面的答案所建议的，我不得不再次调用.mask()（没有参数）来获取未掩码的值。 - jcairney

Answer 3

我遇到了同样的问题，以下是帮助我的方法：

    var maskedInput = $("#id").data('mask');
    if (maskedInput) {
        maskedInput.remove();
    }

- Agni

Answer 4

我将使用jQuery Mask插件v1.14.12

在我的情况下，.unmask()不起作用是因为我使用的选择器与第一次创建掩码时使用的选择器不同。

例如，假设这是输入内容：

<input type="text" class="someclass maskme" value="" name="somename" />

这个口罩是这样制造的：

$('.maskme').mask('0000');

接着，我尝试按照以下方式来解除它的掩饰，但没有成功：

$('.someclass').unmask();

我将其更改为以下内容后，它按预期工作：

$('.maskme').unmask();

- zed

Answer 5

移除输入掩码：

$(selector).inputmask('remove');

或者

var input = document.getElementById(selector);
if (input.inputmask)
  input.inputmask.remove()

或者

Inputmask.remove(document.getElementById(selector));

- EngineerCoder

---

在 $(selector).mask(...) 之后，$(selector).inputmask 未定义。 - RoutesMaps.com

未捕获的引用错误：Inputmask未定义。 - RoutesMaps.com

@Crimean.us 输入掩码库必须被加载。 https://github.com/RobinHerbots/Inputmask - EngineerCoder

谢谢您，@EngineerCoder。 - RoutesMaps.com

问题与jquery.maskedinput插件有关（https://github.com/digitalBush/jquery.maskedinput），而不是Inputmask（https://github.com/RobinHerbots/Inputmask）。 - userlond

Answer 6

尝试使用:checked而不是attr检查，我认为这就是问题所在。我的意思是，在if条件中使用$('#InternationalOfficePhone').is(':checked')。

- Teja Kantamneni

---

那没有任何区别。我仍然在$("#OfficePhone").unmask()代码上遇到错误。 - Terry Nederveld

你遇到了什么错误？在执行取消掩码操作之前，请检查 isMasked。 - Teja Kantamneni

看看我发布的答案。我终于弄明白了。 - Terry Nederveld

Answer 7

我正在使用query.maskedinput.js 版本: 1.4.1。

解除掩码的操作由以下代码完成。

$("input").blur(function() {
    $("#info").html("Unmasked value: " + $(this).mask());
});

示例：掩码是。

$("#pannumber").mask("aaaaa 9999 a");

揭开面纱

$("#pannumber").blur(function() { 
    var pannumber=  $(this).mask() ;
});

- user1526780

Answer 8

我正在使用inputmask js版本：5.0.2。

我正在使用以下技术进行掩码和取消掩码

$("#mailPhone").mask('[phone]'); //masking.

或者

$('#mailPhone').inputmask('[phone]') //masking.

&

$('#mailPhone').inputmask("remove");  //unmasking.

- Akash Pawar