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
How to prevent number input on keydown?
提问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.value
is useless since the key value is not projected into the target value yete.keyCode
for number depends on keyboard type, language layout, Fn or Shift keyString.fromCharCode(e.keyCode)
is not reliable, at least on my keyboard (Czech qwerty)- w3 specificationsays
e.keyCode
is a legacy attribute and suggestse.char
instead, 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 keypress
event instead. It's the only key event which will give you information about the character that was typed, via the which
property in most browsers and (confusingly) the keyCode
property in IE. Using that, you can conditionally suppress the keypress
event 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
大多数浏览器中的属性和(令人困惑的)keyCode
IE 中的属性为您提供有关键入的字符的信息。使用它,您可以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()
}