jquery输入字段模式

jquery Input field pattern

本文关键字：模式 字段 输入 jquery      更新时间：2023-09-26

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

一切都很完美，但你能把它附加到文本框的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>

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

为什么要发明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标记。

找到了解决方案。。此代码适用于我：

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

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

$("#InputID").blur(function() {
    $(this).val() // check if input value is equal required pattern use any format JS plugin  
});
相关文章：