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.
You don't need to pass a parameter to the unmask
function!
Use it without a parameter and it works well.
$("#OfficePhone").unmask();
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>
I run through the same problem, and what helped me is:
var maskedInput = $("#id").data('mask');
if (maskedInput) {
maskedInput.remove();
}
Try using the :checked
instead of attr
check, I think that is the problem. I mean use $('#InternationalOfficePhone').is(':checked')
in the if condition.
Remove the inputmask:
$(selector).inputmask('remove');
or
var input = document.getElementById(selector);
if (input.inputmask)
input.inputmask.remove()
or
Inputmask.remove(document.getElementById(selector));
I am using query.maskedinput.js Version: 1.4.1
I referred
https://github.com/digitalBush/jquery.maskedinput/blob/bb66bf9b1c3eddd1d2349cee103127ae08d0a877/demo/index.html
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() ;