Question

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

e.target.value没用，因为键值尚未投射到目标值
e.keyCode取决于键盘类型，语言布局，Fn或Shift键
String.fromCharCode(e.keyCode)不可靠，至少在我的键盘上（捷克qwerty）
w3 specification说e.keyCode是遗留属性，建议使用e.char，但尚未在浏览器中实现

那么如何在文本字段中显示之前捕获数字输入？

Answer 1

改为使用keypress事件。这是唯一的关键事件，它将通过大多数浏览器中的which属性和（混乱地）IE中的keyCode属性为您提供有关所输入字符的信息。使用它，您可以根据键入的字符有条件地抑制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;
    }
};

Answer 2

尝试使用此替换整数值：

<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>

Answer 3

我在这里发了答案。您可以使用isNumber检查在keydown上输入的字符。确保你在keydown上处理小键盘键，如下面的答案所示。 https://stackoverflow.com/a/42917293/5076414

Answer 4

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

    // '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()
    }

如何防止keydown上的数字输入？

4 个答案: