jquery Input field pattern

问题

I am new to JQUERY. I have an requirement like based on the input, the same input field needs to be altered without submitting the form.

If number starts with 33 or 55 or 81, display as (xx) xxxx-xxxx, for everything other number pattern should be (xxx) xxx-xxxx.

Could anyone help me on this.

I tried this code:

<html>
<head>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
</head>
<body>

<h1>Validation</h1>

<input id="phone" type="number">
<script>
$(document).ready(function(){
    var twoNumbers = $(this).attr("phone").substr(0, 2);
    if(twoNumbers == 33 || twoNumbers == 55 || twoNumbers == 81){
        $("#phone").mask("(99) 9999-9999");
    }else{
        $("#phone").mask("(999) 999-9999");
    }
});
</script>
</body>
</html>

Please correct this html

回答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>

Fiddle: http://output.jsbin.com/fujunojelu

回答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:

<script src="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.

回答3:

Found the solution.. This Code works well for me:

<html>
<head>
<script src="jquery-1.11.3.js"></script>
<script src="jquery.catcher.js" type="text/javascript"></script>
<script src="jquery.inputmask.bundle.js"></script>
</head>
<body>
<h3>Mobile Number Formatting</h3>
<input id="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>

回答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  
});

来源：https://stackoverflow.com/questions/34111010/jquery-input-field-pattern

标签

javascript

jquery