本文介绍如何在HTML输入框中限制用户仅能输入数字。通过对比原生JS与jQuery两种方案,详细解析利用onkeyup事件结合正则表达式过滤非数字字符的实现原理,并重点解决光标移动受限的问题,提供优化后的代码逻辑。
原生JS实现数字输入限制
示例如下:
<input type="text" name="" id="box" />
通常的做法是直接在内联事件中处理:
<input type="text" name="" id="box" onkeyup="value=value.replace(/[^\d]/g,'')"/>
优化光标移动问题的jQuery方案
上述方法的缺陷在于,当用户正确输入一串数字后,若尝试将光标移至前面修改其中某位数字,会发现无法移动光标。因此,下面介绍一种更完善的处理方式。
实际上,增加一个判断条件可以使体验更加顺畅:
$('input#box').keyup(function(){
var c=$(this);
if(/[^\d]/.test(c.val())){//替换非数字字符
var temp_amount=c.val().replace(/[^\d]/g,'');
$(this).val(temp_amount);
}
})
上述函数使用了jQuery的选择器,请注意确保已加载jQuery库。可前往jQuery官网下载。
如需了解更多功能,可参考文章:js限制文本框只能输入数字方法小结