有一个快速的方法来设置HTML文本输入(<input type=text />),只允许数字击键(加上'.')?


当前回答

更安全的方法是检查输入的值,而不是劫持按键并试图过滤keycode。

通过这种方式,用户可以自由使用键盘箭头、修改键、退格键、删除键、使用非标准键键、使用鼠标粘贴、使用拖放文本,甚至使用辅助输入。

下面的脚本允许正数和负数

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById('number'); 输入。Onkeyup =输入。onchange = enforcfloat; //强制只能输入浮点数 函数enforceFloat() { Var valid = /^\-?\d+\. d*$|^\-?[\d]*$/; var = / \ \ d + \数量。* | \ \ d - (\ d) * | (\ d) + \ \ [d]。* | (\ d) + /; If (!valid.test(this.value)) { Var n = this.value.match(number); 这一点。Value = n ?N[0]:“; } } <input id="number" value="-3.1415" placeholder="Type a number" autofocus> .

编辑:我删除了我的旧答案,因为我认为它现在已经过时了。

其他回答

我正在寻找一种阻止数字输入的方法,然后,因为我没有在答案中找到它,这段代码对我来说工作得很好。

我只需要在onkeypress事件中输入它。

如果您只需要阻止数字输入,我相信这将工作良好。

onkeypress="if(event.which &lt; 48 || event.which &gt; 57 ) if(event.which != 8) if(e.keyCode != 9) return false;"

有一个更简单的解决方案,之前没有人提到过:

inputmode="numeric"

阅读更多信息:https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/

ReactJS:

<input
    onKeyPress={(event) => {
        if (!/[0-9]/.test(event.key)) {
            event.preventDefault();
        }
    }}
/>

下面的函数将检查每个输入字符是否为number。

numeric: value => {
    let numset = new Set(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']);
    console.log(numset.has(value.substring(value.length - 1, value.length)));
}

var userName = document.querySelector('#numberField'); userName.addEventListener('input', restrictNumber); 函数限制数字(e) { var newValue = this.value.replace(new RegExp(/[^\d]/,'ig'), “”); this.value = newValue; } <输入类型=“文本” id=“数字字段”>