本文介绍如何使用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下测试均可以。
以上内容为本文分享的全部知识，希望此方法能帮助遇到相同问题的开发者，也欢迎继续支持本站。