Question

我是JQUERY的新手。我有一个基于输入的要求，相同的输入字段需要在不提交表单的情况下进行更改。

如果数字以33或55或81开头，则显示为（xx）xxxx-xxxx，其他所有数字模式应为（xxx）xxx-xxxx。

有人可以帮我解决这个问题。

我试过这段代码：

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

请更正此HTML

Answer 1

为什么要发明weel，你已经拥有它。您可以使用已经制作的jquery插件之一完成此操作。

这是其中之一：

http://digitalbush.com/projects/masked-input-plugin/

下载并上传到您的服务器。将插件的引用放在页面的头部：

<script src="jquery.maskedinput.js" type="text/javascript"></script>

您现在可以按照自己喜欢的方式屏蔽输入：

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");
});

我理解您想要进行一些条件屏蔽，就像数字以85开头一样。如果您还需要帮助，请同时发布您的HTML标记。

Answer 2

一切都很完美，但是您可以将它附加到文本框的keyup事件中吗？它也是$(this).val().substr(0, 2);而不是您使用的那个。请确保仅在输入为> 2个字符时才放置掩码。

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

小提琴：http://output.jsbin.com/fujunojelu

Answer 3

找到解决方案..本规范适用于我：

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

Answer 4

使用事件模糊输入，然后根据所需模式格式化输入值的值

$("#InputID").blur(function() {

    $(this).val() // check if input value is equal required pattern use any format JS plugin  
});

jquery输入字段模式

4 个答案: