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

一、实现思路

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

关键代码：

\d：匹配数字

^/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达到最佳效果。