如何防止数字输入按下键

How to prevent number input on keydown?

本文关键字：数字输入 何防止      更新时间：2023-09-26

我想防止数字输入keydown事件上的文本字段和运行自定义处理程序函数。以下是问题

  • e.target.value是无用的，因为键值还没有投影到目标值
  • 数字的e.keyCode取决于键盘类型，语言布局，Fn或Shift键
  • String.fromCharCode(e.keyCode)不可靠，至少在我的键盘上(捷克qwerty)
  • w3规范说e.keyCode是一个遗留属性，并建议e.char代替，但它还没有在浏览器中实现

那么如何在数字输入出现在文本字段之前捕获它呢?

使用keypress事件代替。这是唯一的键事件，它会给你输入的字符信息，通过which属性在大多数浏览器和(令人困惑的)keyCode属性在IE。使用它，您可以根据字符类型有条件地抑制keypress事件。但是，这并不能帮助您防止用户粘贴或拖动包含数字字符的文本，因此您仍然需要某种额外的验证。

我最喜欢的JavaScript关键事件参考:http://unixpapa.com/js/key.html

textBox.onkeypress = function(e) {
    e = e || window.event;
    var charCode = (typeof e.which == "undefined") ? e.keyCode : e.which;
    var charStr = String.fromCharCode(charCode);
    if (/'d/.test(charStr)) {
        return false;
    }
};

试着替换整数值:

<input onkeydown="Check(this);" onkeyup="Check(this);"/>
<script>
function Check(me) {
    me.value = me.value.replace(/[0-9]/g, "");
}
</script>

防止整数输入:

<input onkeydown="Check(event);" onkeyup="Check(event);"/>
<script>
function Check(e) {
    var keyCode = (e.keyCode ? e.keyCode : e.which);
    if (keyCode > 47 && keyCode < 58) {
        e.preventDefault();
    }
}
</script>

一行解

$('#input-field').keydown(e => !String.fromCharCode(e.which).match(/'d/g))

防止浮动代码字符的解决方案

    // 'left arrow', 'up arrow', 'right arrow', 'down arrow',
    const = arrowsKeyCodes: [37, 38, 39, 40],
    // 'numpad 0', 'numpad 1',  'numpad 2', 'numpad 3', 'numpad 4', 'numpad 5', 'numpad 6', 'numpad 7', 'numpad 8', 'numpad 9'
    const = numPadNumberKeyCodes: [96, 97, 98, 99, 100, 101, 102, 103, 104, 105],
    export const preventFloatingPointNumber = e => {
    // allow only [0-9] number, numpad number, arrow,  BackSpace, Tab
    if ((e.keyCode < 48 && !arrowsKeyCodes.includes(e.keyCode) || e.keyCode > 57 &&
        !numPadNumberKeyCodes.includes(e.keyCode)) &&
        !(e.keyCode === 8 || e.keyCode === 9))
        e.preventDefault()
    }
相关文章：