JS限制输入框仅允许数字输入的两种实现方式

作者:异步漫步

时间:2026-10-22

浏览:355

本文介绍如何在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限制文本框只能输入数字方法小结

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章