Jquery Input Field Pattern
Solution 1:
Everything is perfect, but can you please attach it to the keyup event of the textbox? Also it is $(this).val().substr(0, 2); not the one you used. Please make sure you are putting the mask only when the input is > 2 characters.
<script>
$(document).ready(function() {
$("#phone").keyup(function () {
$(this).attr("value", $(this).val());
if ($(this).val().length > 2) {
var twoNumbers = $(this).val().substr(0, 2);
if (twoNumbers == 33 || twoNumbers == 55 || twoNumbers == 81) {
console.log("First: " + twoNumbers);
$("#phone").inputmask({
mask: "(99) 9999-9999"
});
} else {
console.log("Second: " + twoNumbers);
$("#phone").inputmask({
mask: "(999) 999-9999"
});
}
}
});
});
</script>Solution 2:
Why invent the weel, you have it already. You can accomplish this with one of the already made jquery plugins.
This is one of them:
http://digitalbush.com/projects/masked-input-plugin/
Download it and upload it to your server. Put the reference to the plugin in the head of your page:
<scriptsrc="jquery.maskedinput.js"type="text/javascript"></script>You can now mask the inputs in the way you like:
jQuery(function($){
$("#date").mask("99/99/9999", {placeholder:"mm/dd/yyyy"});
$("#phone").mask("(999) 999-9999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
});
I understand You want to do some conditional masking, as if number starts with 85. If you also need help for this, please post also your HTML markup.
Solution 3:
Found the solution.. This Code works well for me:
<html><head><scriptsrc="jquery-1.11.3.js"></script><scriptsrc="jquery.catcher.js"type="text/javascript"></script><scriptsrc="jquery.inputmask.bundle.js"></script></head><body><h3>Mobile Number Formatting</h3><inputid="phone"type="text"><script>
$(document).ready(function() {
$("#phone").keyup(function () {
$(this).attr("phone", $(this).val());
var twoNumbers = $(this).val().substr(0, 3);
if (twoNumbers == '(33' || twoNumbers == '(55' || twoNumbers == '(81') {
$("#phone").inputmask({
mask: "(99) 9999-9999"
});
} else {
$("#phone").inputmask({
mask: "(999) 999-9999"
});
}
});
});
</script></body></html>Solution 4:
use event blur for input then format the value of input value according to the required pattern
$("#InputID").blur(function() {
$(this).val() // check if input value is equal required pattern use any format JS plugin
});
Post a Comment for "Jquery Input Field Pattern"