【JS】input输入框只能输入数字 | 您所在的位置:网站首页 › easyui输入框只能输入数字 › 【JS】input输入框只能输入数字 |
一、实现思路 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达到最佳效果。 |
CopyRight 2018-2019 实验室设备网 版权所有 |