How to get the jQuery MaskedInput unmask() function to work properly?

Question

I am trying to have one input on my page that I would like to have a U.S. phone number mask by default. If a end user clicks a checkbox specifing they would like to enter a International phone number I want the mask to be removed.

I have tried multiple ways and have been unsuccessful thus far. In the current project I am using jQuery to hide/show a completely different input. But I don't like that option and would like a more streamlined approach.

I am using the following:

jQuery 1.4.1 (going to upgrade to 1.4.2 soon) and jQuery.MaskedInput-1.2.2

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

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

The code above works properly to set the default mask, but no matter what I try on the click event for the InternationalOfficePhone it doesn't remove the mask.

Any help is much appreciated.

The error I am getting is on the un/mask lines and it returns an "Object doesn't support this property or method" — Terry Nederveld, Apr 05 '10 at 19:37

Diego Mendes · Answer 1 · 2016-11-18T18:59:04.970

29

You don't need to pass a parameter to the unmask function! Use it without a parameter and it works well.

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

edited Nov 18 '16 at 18:59

answered Dec 03 '10 at 19:11

Diego Mendes

8,767
1
28
35

Confirmed! Works without parameter. This should probably have been a comment though... – Chad Jul 07 '15 at 18:16
6

Why a comment if this is the answer to the question? – Diego Mendes Jul 30 '15 at 22:57
There was already an answered that used the `unmask` function, and your answer reads as if it is building upon that answer – Chad Jul 31 '15 at 13:39
1

off course not, the accepted answer is wrong. Terry use .unmask(parameter) and the right answer is .unmask(). This is why I put as a new answer, that time I couldn't edit others. – Diego Mendes Aug 07 '15 at 05:37
Accepted answer is not wrong, but the parameter is not necessary. It still works with the parameter. But I did upvote your answer because it is more correct, given this. – Chad Aug 07 '15 at 13:40

score 20 · Accepted Answer · answered Apr 05 '10 at 20:13

20

I was able to figure out the code to get it to work. Below is the code I am using now.

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

answered Apr 05 '10 at 20:13

Terry Nederveld

704
1
6
14

`.unmask()` works perfectly. All I needed, thanks. But as pointed out in Diego's answer, you do not need to pass a parameter to the function. – Chad Jul 07 '15 at 18:15
Does this still work with maskedInput 1.4.1? I'm finding that neither `.unmask()` nor `.unmask(maskString)` removes the functionality from the field nor the mask-inserted characters from the value. I had to call `.mask()` again (no arguments) to get the unmasked value, as suggested by [this answer below](https://stackoverflow.com/a/45075512/1279516) – jcairney Feb 26 '20 at 21:41

score 3 · Answer 3 · answered Jan 06 '15 at 07:15

3

I run through the same problem, and what helped me is:

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

answered Jan 06 '15 at 07:15

Agni

370
4
14

score 2 · Answer 4 · answered Apr 05 '10 at 19:23

2

Try using the :checked instead of attr check, I think that is the problem. I mean use $('#InternationalOfficePhone').is(':checked') in the if condition.

answered Apr 05 '10 at 19:23

Teja Kantamneni

16,851
10
54
84

That didn't make a difference. I am still getting an error on the $("#OfficePhone").unmask() code. – Terry Nederveld Apr 05 '10 at 19:29
What is the error you are getting? Check `isMasked` before doing the unmask – Teja Kantamneni Apr 05 '10 at 20:16
1

See my posted answer. I was able to finally figure it out. – Terry Nederveld Apr 05 '10 at 20:22

score 2 · Answer 5 · answered Mar 08 '17 at 08:34

2

Remove the inputmask:

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

or

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

or

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

answered Mar 08 '17 at 08:34

EngineerCoder

1,373
13
26

After $(selector).mask(...) $(selector).inputmask is undefined. – RoutesMaps.com Aug 29 '17 at 06:48
1

Uncaught ReferenceError: Inputmask is not defined – RoutesMaps.com Aug 29 '17 at 06:59
@Crimean.us inputmask library must be loaded. https://github.com/RobinHerbots/Inputmask – EngineerCoder Aug 30 '17 at 14:36
Thank you @EngineerCoder – RoutesMaps.com Aug 31 '17 at 16:21
Question is related to jquery.maskedinput (https://github.com/digitalBush/jquery.maskedinput) plugin, not to Inputmask (https://github.com/RobinHerbots/Inputmask). – userlond Nov 07 '18 at 06:39

score 2 · Answer 6 · answered Jul 01 '20 at 21:03

I'm using jQuery Mask Plugin v1.14.12

In my case, the .unmask() wasn't working because I was using a different selector than the one used when the mask was first created.

For example, let's say this was the input:

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

the mask was created like this:

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

then, I was trying to unmask it as follows, which wasn't working:

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

once I changed it to the following, it worked as expected:

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

score 1 · Answer 7 · edited Jul 02 '20 at 08:47

1

I am using query.maskedinput.js Version: 1.4.1

the unmasking is done by

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

example Masking is

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

Unmasking

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

edited Jul 02 '20 at 08:47

zed

2,106
4
23
40

answered Jul 13 '17 at 08:37

user1526780

61
1
8

How to get the jQuery MaskedInput unmask() function to work properly?

7 Answers7

Linked