Fatal编程技术网

Javascript jquery输入字段模式

javascript jquery

Javascript jquery输入字段模式,javascript,jquery,Javascript,Jquery,我不熟悉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="jquer

我不熟悉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> 


验证
$（文档）.ready（函数（）{
VarTwoNumbers=$（this.attr（“phone”）.substr（0,2）；
如果（twoNumbers==33 | | twoNumbers==55 | | twoNumbers==81）{
$（“#phone”）.mask（“（99）9999-9999”）；
}否则{
$（“#phone”）.mask（“（999）999-9999”）；
}
});
请更正此html

为什么发明weel，你已经有了。您可以使用一个已经制作好的jquery插件来实现这一点

这是其中之一：

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

<script src="jquery.maskedinput.js" type="text/javascript"></script>
我知道你们想做一些条件掩蔽，好像数字以85开头。如果您还需要帮助，请同时发布您的HTML标记。

为什么要发明weel，您已经有了它。您可以使用一个已经制作好的jquery插件来实现这一点

这是其中之一：

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

<script src="jquery.maskedinput.js" type="text/javascript"></script>
我知道你们想做一些条件掩蔽，好像数字以85开头。如果您还需要帮助，请同时发布您的HTML标记。

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

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

    $(this).val() // check if input value is equal required pattern use any format JS plugin  
});
对输入使用事件模糊，然后根据所需模式格式化输入值的值

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

    $(this).val() // check if input value is equal required pattern use any format JS plugin  
});
一切都很完美，但您能否将其附加到文本框的
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>




$（文档）.ready（函数（）{
$（“#电话”）.keyup（功能）{
$（this.attr（“value”，$（this.val（））；
如果（$（this.val（）.length>2）{
var twownumbers=$（this.val（）.substr（0,2）；
如果（twoNumbers==33 | | twoNumbers==55 | | twoNumbers==81）{
console.log（“第一个：+两个数字）；
$（“#电话”）.inputmask({
面罩：“（99）9999-9999”
});
}否则{
console.log（“第二个：+两个数字）；
$（“#电话”）.inputmask({
面罩：“（999）999-9999”
});
}
}
});
});



Fiddle:
一切都很完美，但能否将其附加到文本框的
键控事件中？它也是
$（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>




$（文档）.ready（函数（）{
$（“#电话”）.keyup（功能）{
$（this.attr（“value”，$（this.val（））；
如果（$（this.val（）.length>2）{
var twownumbers=$（this.val（）.substr（0,2）；
如果（twoNumbers==33 | | twoNumbers==55 | | twoNumbers==81）{
console.log（“第一个：+两个数字）；
$（“#电话”）.inputmask({
面罩：“（99）9999-9999”
});
}否则{
console.log（“第二个：+两个数字）；
$（“#电话”）.inputmask({
面罩：“（999）999-9999”
});
}
}
});
});



小提琴手：找到了解决方案。。这段代码对我很有用：


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




手机号码格式化
$（文档）.ready（函数（）{
$（“#电话”）.keyup（功能）{
$（this.attr（“phone”，$（this.val（））；
var twownumbers=$（this.val（）.substr（0,3）；
如果（twoNumbers=='（33'| | twoNumbers=='（55'| | twoNumbers=='（81'）{
$（“#电话”）.inputmask({
面罩：“（99）9999-9999”
});
}否则{
$（“#电话”）.inputmask({
面罩：“（999）999-9999”
});
}
});
});

找到了解决方案..此代码对我很有效：


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




手机号码格式化
$（文档）.ready（函数（）{
$（“#电话”）.keyup（功能）{
$（this.attr（“phone”，$（this.val（））；
var twownumbers=$（this.val（）.substr（0,3）；
如果（twoNumbers=='（33'| | twoNumbers=='（55'| | twoNumbers=='（81'）{
$（“#电话”）.inputmask({
面罩：“（99）9999-9999”
});
}否则{
$（“#电话”）.inputmask({
面罩：“（999）999-9999”
});
}
});
});

可能的答案太多，或者好的答案对于这种格式来说太长。请添加详细信息以缩小答案集，或者隔离一个可以在几个段落中回答的问题。@PraveenKumar-让我进一步澄清一下：有一个输入字段。当我输入以33、55或81开头的手机号码时，我应该开始以（xx）xxxx xxxx格式显示这些数字。其他数字将显示为（xxx）xxx xxxx没有提交表单这就是我要说的。输入掩码的jQuery插件中的任何一个都可以：-检查这个。@PraveenKumarI已经共享了html代码，请帮助meLooks，就像你已经接受了答案一样？可能的答案太多，或者好的答案对于这种格式来说太长。请向na添加详细信息r查看答案集或找出一个可以在几个段落中回答的问题。@PraveenKumar-让我进一步澄清一下：有一个输入字段。当我输入以33、55或81开头的手机号码时，我应该开始以（xx）xxxx xxxx格式显示这些号码。其他号码将显示为（xxx）xxx xxxx没有提交表单这就是我要说的。任何一个输入掩码的jQuery插件都可以：-检查这个。@PraveenKumarI已经共享了html代码，请帮助meLooks，就像你已经接受了答案一样？但是，更改不会发生