【JS】input输入框只能输入数字

风晓 2024-01-01 19:36:43  51715 赞同 0 反对 0

分类：资源

input只能输入纯数字的思路其实很简单，监听输入框值的变化，每次输入检索输入框的值，将非数字的字段替换成空，再将此值赋予给输入框。

关键代码：

\d：匹配数字

replace(/[^/d]/g,'')：匹配非数字，并替换成空。

那我们的实现代码为:

var input = document.querySelector("#demo");
input.oninput = function (){
    input.value = input.value.replace(/[^\d]/g,'');
}

输入数字字母试试：

二、onchange onkeyup与oninput的选择

其实说到input输入监听，更多想到的是onchange与onkeyup，而在上面实现中，使用的却是onkeyup，这里简单说说理由。

1.oninput：在用户输入时触发，与onchange不同之处在于 oninput 事件在元素值发生变化是立即触发。

2.onchange：在input值发生改变且输入框失去焦点时触发，所以在用户输入失去焦点前，非数字并不能被替换为空，视觉上存在一点缺陷。

亲自试试：

3.onkeyup：键盘弹起时触发，也存在一个问题，英文输入情况下，非数字会短暂存在后才会被替换，中文输入情况下，字母还是能输入，功能上存在一定缺陷。

亲自试试：

综上，还是推荐oninput达到最佳效果。

如果您发现该资源为电子书等存在侵权的资源或对该资源描述不正确等，可点击“私信”按钮向作者进行反馈；如作者无回复可进行平台仲裁，我们会在第一时间进行处理！

评价 0 条