[英]Allow AlphaNumeric and other symbol using JavaScript
I have use this code for allow numeric only in textbox, but how make Charkey only allow AlphaNumeric and other symbol like -./ (dash,dot,slash)我已经使用此代码仅在文本框中允许数字,但是如何使 Charkey 只允许 AlphaNumeric 和其他符号,如-./ (破折号、点、斜线)
this my code for allow Numeric这是我的允许数字代码
function NumericKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
thankyou谢谢你
Firstly, Character Codes
and Key Codes
are different thing, what you're looking for is Key Codes
.首先,
Character Codes
和Key Codes
是不同的东西,你要找的是Key Codes
。
You can first check the key codes you want to allow/disallow by looking them up in a online table, or here: http://keycode.info/您可以首先通过在在线表格中查找来检查要允许/禁止的密钥代码,或者在这里: http : //keycode.info/
Then then by using a whitelist/blacklist to check the codes:然后通过使用白名单/黑名单来检查代码:
function NumericKey(evt){
var allowed = [189, 190, 191]; // corresponds to **. , -**
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return allowed.indexOf(charCode) >= 0;
return true;
}
This would allow you to arbitrarily whitelist any keycodes.这将允许您任意将任何键码列入白名单。
A simpler solution to your case, since key codes of ,.- are adjacent to each other:一个更简单的解决方案,因为,.- 的关键代码彼此相邻:
function NumericKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode >= 189 && charCode <= 191))
return false;
return true;
}
You should not listen for keyboard events ( keydown
/ keypress
/ keyup
) to filter out certain characters, as the value of the input can also be updated by pasting or dropping text into it and there are many exceptions you should not prevent, such as arrows, delete, escape, shortcuts such as select all, copy, paste... so trying to come up with an exhaustive list of the ones that should be allowed is probably not a good idea.您不应该监听键盘事件(
keydown
/ keypress
/ keyup
)来过滤掉某些字符,因为输入的值也可以通过将文本粘贴或拖放到其中来更新,并且有许多您不应该阻止的异常,例如箭头、删除、转义、全选、复制、粘贴等快捷方式……因此,尝试列出应允许的内容的详尽列表可能不是一个好主意。
Moreover, that won't work on mobile, where most keys emit the same values e.key = 'Unidentified'
, e.which== 229
and e.keyCode = 229
.此外,这不适用于移动设备,其中大多数键发出相同的值
e.key = 'Unidentified'
, e.which== 229
和e.keyCode = 229
。
Instead, just listen for the input
event and update the input value removing all invalid characters while preserving the cursor's position:相反,只需侦听
input
事件并更新输入值,删除所有无效字符,同时保留光标的位置:
const input = document.getElementById('input'); input.oninput = (e) => { const cursorPosition = input.selectionStart - 1; const hasInvalidCharacters = input.value.match(/[^0-9 -./]/); if (!hasInvalidCharacters) return; // Replace all non-digits: input.value = input.value.replace(/[^0-9 -./]/g, ''); // Keep cursor position: input.setSelectionRange(cursorPosition, cursorPosition); };
<input id="input" type="text" placeholder="Digits and - . / only" />
Here you can see a similar answer and example for a slightly more complex behaviour to allow only numbers with one single decimal separator: https://stackoverflow.com/a/64084513/3723993在这里,您可以看到类似的答案和示例,该示例的行为稍微复杂一些,仅允许带有一个小数分隔符的数字: https : //stackoverflow.com/a/64084513/3723993
Anyway, if you still want to try that approach, just keep in mind both e.which
and e.keyCode
are deprecated, so e.key
or e.code
should be used instead, which also makes the code easier to understand.无论如何,如果您仍然想尝试这种方法,请记住
e.which
和e.keyCode
都已弃用,因此应e.key
或e.code
,这也使代码更易于理解。 Also keep in mind some old browsers used some non-standard codes for some keys, so, for example, left is usually 'LeftArrow'
and right is 'RightArrow'
, but on IE and Legacy Edge they would be 'Left'
and 'Right'
instead.还请记住,一些旧浏览器对某些键使用了一些非标准代码,因此,例如,左通常是
'LeftArrow'
而右是'RightArrow'
,但在 IE 和 Legacy Edge 上,它们将是'Left'
和'Right'
代替。
If you need to check KeyboardEvent's properties values such as e.key
, e.code
, e.which
or e.keyCode
you can use https://keyjs.dev .如果您需要检查 KeyboardEvent 的属性值,例如
e.key
、 e.code
、 e.which
或e.keyCode
您可以使用https://keyjs.dev 。 I will add information about these kinds of cross-browser incompatibilities soon!我会尽快添加有关这些跨浏览器不兼容的信息!
Disclaimer: I'm the author.免责声明:我是作者。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.