javascript 如何防止按键输入数字?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15728261/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 01:51:53  来源:igfitidea点击:

How to prevent number input on keydown?

javascriptcross-browserkeyboard-events

提问by Jan Turoň

I want to prevent number input on keydown eventon textfield and run custom handler function. Here are the issues

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

  • e.target.valueis useless since the key value is not projected into the target value yet
  • e.keyCodefor number depends on keyboard type, language layout, Fn or Shift key
  • String.fromCharCode(e.keyCode)is not reliable, at least on my keyboard (Czech qwerty)
  • w3 specificationsays e.keyCodeis a legacy attribute and suggests e.charinstead, but it is not implemented in browsers yet
  • e.target.value没有用,因为键值还没有投影到目标值中
  • e.keyCode数字取决于键盘类型、语言布局、Fn 或 Shift 键
  • String.fromCharCode(e.keyCode)不可靠,至少在我的键盘上(捷克语 qwerty)
  • w3 规范e.keyCode是一个遗留属性并建议e.char改为,但它尚未在浏览器中实现

So how to catch the number input before it appears in the textfield?

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

回答by Tim Down

Use the keypressevent instead. It's the only key event which will give you information about the character that was typed, via the whichproperty in most browsers and (confusingly) the keyCodeproperty in IE. Using that, you can conditionally suppress the keypressevent based on the character typed. However, this will not help you prevent the user from pasting or dragging in text containing numeric characters, so you will still need some kind of extra validation.

改用keypress事件。这是唯一一个关键事件,它可以通过which大多数浏览器中的属性和(令人困惑的)keyCodeIE 中的属性为您提供有关键入的字符的信息。使用它,您可以keypress根据键入的字符有条件地抑制事件。但是,这不会帮助您防止用户粘贴或拖动包含数字字符的文本,因此您仍然需要某种额外的验证。

My favourite reference for JavaScript key events: http://unixpapa.com/js/key.html

我最喜欢的 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;
    }
};

回答by pala?н

Try this to replace integer values:

试试这个来替换整数值:

<input onkeydown="Check(this);" onkeyup="Check(this);"/>

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

To prevent integer input:

防止整数输入:

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

回答by Palaniichuk Dmytro

My solution to prevent floating code characters

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

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