jQuery实现正则表达式限制文本框仅输入数字

作者:开源拾贝时间:2026-10-30 09:21:02浏览:272

本文介绍如何使用jQuery结合正则表达式限制文本框仅允许输入数字。通过对比JavaScript原生方法和HTML属性方案,指出兼容性问题,最终提供基于jQuery的完整代码示例,支持IE7-10及Firefox、Chrome等主流浏览器,实现16位数字输入限制。

需求背景与方案对比

网站开发中常遇到一个具体需求:限制用户输入的文本框只能接受16位数字。

在实现过程中,曾尝试使用JavaScript的常规处理方法。

其中一种常见的处理思路如下。


//只允许输入数字
function checkkey2(value, e) {
  var key = window.event ? e.keyCode : e.which;
  if ((key > 95 && key < 106) || (key > 47 && key < 60)) {

  }
  else if (key != 8) {
  if (window.event) //IE
  {
    e.returnValue = false; 
  }
  else //Firefox
  {
    e.preventDefault();
  }
  };
};

另一种替代方案则是利用HTML事件属性进行限制。

为了更精准地控制输入内容,采用正则表达式来限制文本框仅能输入数字。


onkeyup="value=value.replace(/[^/d] /g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))" 

上述两种方法在实际使用中均存在一定缺陷,例如浏览器兼容性问题或无法完全达到预期效果,因此最终决定采用正则表达式自行编写逻辑。

以下是具体的实现代码,逻辑相对简单。

jQuery正则表达式实现方案


<head>
  <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />
  <title></title>
  <!-- http://www.cnblogs.com/babycool -->
  <script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#xxxxxx").keyup(function () {
        //如果输入非数字,则替换为'',如果输入数字,则在每4位之后添加一个空格分隔
        this.value = this.value.replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, "$1 ");
      })
    });
  </script>
</head>
<body>
  限制只能输入19个字符
  <input id="xxxxxx" type="text" name="name" value="" maxlength="19" />
  <br />
 
  <br />
  输入非数字替换为''
  <input type="text" name="name" value="" onkeyup="value=value.replace(/[^\d]/g,'')" />
  <br />
  <br />
</body>

页面展示效果如图所示。

需求背景与方案对比

关于浏览器的兼容性表现。

我在IE7.8.9.10下,firefox,chrome下测试均可以。

以上内容为本文分享的全部知识,希望此方法能帮助遇到相同问题的开发者,也欢迎继续支持本站。

作者最新文章