onkeyup限制输入框只能输入数字

最新推荐文章于 2024-07-10 11:44:34 发布

转载最新推荐文章于 2024-07-10 11:44:34 发布 · 1.7k 阅读

标签

#js

js 专栏收录该内容

10 篇文章

订阅专栏

本文深入探讨了HTML输入验证方法，通过使用JavaScript实现限制输入为数字，并进一步阻止外部复制内容粘贴至输入框。文章还提供了一个改进的代码示例，包括使用事件监听器和正则表达式进行有效验证。此外，文章强调了通过添加if语句增强代码的灵活性和用户体验。

例子：html代码

<input type="text" name="" id="box" />

通常都直接用：

<input type="text" name="" id="box" onkeyup="value=value.replace(/[^\d]/g,'')"/>

以上的缺点是，当你正确输入的是一串数字后，想用光标移动到前面修改其中的一个数字，发现移不动，所以就显示了下面的方法的好处

如果我们除了要限定只能输入数字之外还防止从其他地方复制了内容粘贴到输入框中，那么可以用下面的代码：

<input type="text" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d]/g,'') " name="numberbox" value=""/>

其中，onafterpaste防止用户从其它地方copy内容粘贴到输入框。

其实加个if更加和谐：

$('input#box').keyup(function(){  
            var c=$(this);  
            if(/[^\d]/.test(c.val())){//替换非数字字符  
              var temp_amount=c.val().replace(/[^\d]/g,'');  
              $(this).val(temp_amount);  
            }  
         })

转载自：点击打开链接