I have a problem masking a phone input with jQuery and Masked Input Plugin.
There are 2 possible formats:
(XX)XXXX-XXXX
(XX)XXXXX-XXXX
Is there any way to mask it accepting both cases?
EDIT:
I tried:
$("#phone").mask("(99) 9999-9999");
$("#telf1").mask("(99) 9999*-9999");
$("#telf1").mask("(99) 9999?-9999");
But it doesn't works as I would like.
The closest one was (xx)xxxx-xxxxx.
I would like to get (xx)xxxx-xxxx when I type the 10th number, and (xx)xxxxx-xxxx when I type the 11th. Is it posible?
First, include the jQuery and masked input javascript files. Next, call the mask function for those items you wish to have masked. jQuery(function($){ $("#date"). mask("99/99/9999"); $("#phone").
jQuery mask is a jQuery plugin that helps in putting on a mask on the basic HTML input fields and other elements. If the developer wants the input field to take inputs in a certain format only, then they can use the jQuery mask plugin for it.
In computer programming, an input mask refers to a string expression, defined by a developer, that constrains user input. It can be said to be a template, or set format that entered data must conform to, ensuring data integrity by preventing transcription errors.
This is a lightweight (less than 2kb) and easy-to-use jQuery input mask plugin to mask and vali date US (or international) phone numbers in standard input fields. 1. Download, unzip the plugin and then insert the JavaScript jquery-input-mask-phone-number.js after jQuery JavaScript library. 2. Create a normal text field for the telephone input. 3.
How to start using jQuery? More in this category... This is a lightweight (less than 2kb) and easy-to-use jQuery input mask plugin to mask and vali date US (or international) phone numbers in standard input fields. 1. Download, unzip the plugin and then insert the JavaScript jquery-input-mask-phone-number.js after jQuery JavaScript library.
Here is a jQuery phone number mask. No plugin required. Format can be adjusted to your needs. Updated JSFiddle. <form id="example-form" name="my-form"> <input id="phone-number" name="phone-number" type="text" placeholder=" (XXX) XXX-XXXX"> </form>
Here the mask uses the default A and S. With that, we have the new alphabet character Y for masking. for which the user has to input digits into the input elements. This way, you can customize the existing ones as well as add new ones as per your requirements.
Try this - http://jsfiddle.net/dKRGE/3/
$("#phone").mask("(99) 9999?9-9999");
$("#phone").on("blur", function() {
var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );
if( last.length == 3 ) {
var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 );
var lastfour = move + last;
var first = $(this).val().substr( 0, 9 );
$(this).val( first + '-' + lastfour );
}
});
Here is a jQuery phone number mask. No plugin required. Format can be adjusted to your needs.
Updated JSFiddle.
HTML
<form id="example-form" name="my-form">
<input id="phone-number" name="phone-number" type="text" placeholder="(XXX) XXX-XXXX">
</form>
JavaScript
$('#phone-number', '#example-form')
.keydown(function (e) {
var key = e.which || e.charCode || e.keyCode || 0;
$phone = $(this);
// Don't let them remove the starting '('
if ($phone.val().length === 1 && (key === 8 || key === 46)) {
$phone.val('(');
return false;
}
// Reset if they highlight and type over first char.
else if ($phone.val().charAt(0) !== '(') {
$phone.val('('+$phone.val());
}
// Auto-format- do not expose the mask as the user begins to type
if (key !== 8 && key !== 9) {
if ($phone.val().length === 4) {
$phone.val($phone.val() + ')');
}
if ($phone.val().length === 5) {
$phone.val($phone.val() + ' ');
}
if ($phone.val().length === 9) {
$phone.val($phone.val() + '-');
}
}
// Allow numeric (and tab, backspace, delete) keys only
return (key == 8 ||
key == 9 ||
key == 46 ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105));
})
.bind('focus click', function () {
$phone = $(this);
if ($phone.val().length === 0) {
$phone.val('(');
}
else {
var val = $phone.val();
$phone.val('').val(val); // Ensure cursor remains at the end
}
})
.blur(function () {
$phone = $(this);
if ($phone.val() === '(') {
$phone.val('');
}
});
Actually the correct answer is on http://jsfiddle.net/HDakN/
Zoltan answer will allow user entry "(99) 9999" and then leave the field incomplete
$("#phone").mask("(99) 9999-9999?9");
$("#phone").on("blur", function() {
var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );
if( last.length == 5 ) {
var move = $(this).val().substr( $(this).val().indexOf("-") + 1, 1 );
var lastfour = last.substr(1,4);
var first = $(this).val().substr( 0, 9 );
$(this).val( first + move + '-' + lastfour );
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With