Onkeydown
,我运行以下 JavaScript:
function ThisOnKeyDown(el) {
if (el.title == 'textonly') {
!(/^[A-Za-zÑñ-\s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ-\s]/ig, '') : null;
}
if (el.title == 'numbersonly') {
!(/^[0-9]*$/i).test(el.value) ? el.value = el.value.replace(/[^0-9]/ig, '') : null;
}
if (el.title == 'textandnumbers') {
!(/^[A-Za-zÑñ0-9-\s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ0-9-\s]/ig, '') : null;
}
}
这三个标题属性之一被赋予页面上的各个输入字段。只要正确删除无效字符,该代码就可以工作,但直到输入下一个字符为止。我想找到一种方法来简单地拒绝无效输入。我感谢您的帮助!
编辑:我在全球范围内创建事件。我是这样做的:
function Globalization() {
var inputs = document.getElementsByTagName('input');
for (i = 0; i < inputs.length; i++) {
inputs[i].onfocus = createEventHandler(
ThisOnFocus, inputs[i]);
inputs[i].onblur = createEventHandler(
ThisOnBlur, inputs[i]);
inputs[i].onkeydown = createEventHandler(
ThisOnKeyDown, inputs[i]);
inputs[i].onkeyup = createEventHandler(
ThisOnKeyUp, inputs[i]);
}
}
Globalization()
已运行 body.onload
因此,典型的输入字段具有 HTML,没有像这样的函数调用:
<input id="AppFirstName" style="width: 150px;" type="text" maxlength="30" title="textonly"/>
为了防止它首先被设置,您可以在 keydown 事件处理程序上返回 false,从而防止事件进一步传播。
我使用 jQuery 编写了下面的示例,但是您可以在传统绑定时使用相同的函数。
虽然在服务器端验证也很重要,但为了用户友好性,客户端验证也很重要。
$("input.number-only").bind({
keydown: function(e) {
if (e.shiftKey === true ) {
if (e.which == 9) {
return true;
}
return false;
}
if (e.which > 57) {
return false;
}
if (e.which==32) {
return false;
}
return true;
}
});
上面的代码确实说明了——只允许数字。您可以通过添加异常来修改它,例如像这样的 BACKSPACE
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
function keyispressed(e){
var charValue= String.fromCharCode(e.keyCode);
if((isNaN(charValue)) && (e.which != 8 )){ // BSP KB code is 8
e.preventDefault();
}
return true;
}
</script>
</head>
<body>
<input type="text" onkeydown="return keyispressed(event);"/>
</body>
</html>
您可以在“输入”事件期间替换您的输入值:
// <input oninput=onInput(event) />
const onInput = event => {
event.target.value = event.target.value.replace(/[^0-9+]/g, '')
}
$('.key-filter').keypress(function () {
if (event.key.replace(/[^\w\-.]/g,'')=='') event.preventDefault();
});
然后将 key-filter 类添加到您的输入(如果使用 jquery) 或
<input type="text" onkeypress="if (event.key.replace(/[^\w\-.]/g,'')=='') event.preventDefault();" />
只需将您想要允许的字符放在 ^ 之后的 [] 内即可。 这允许所有字母数字 _ - 和 .
您可以轻松地在单个 html 行中完成此操作。
像这样禁止空格:
<input type="text" onkeypress="return event.charCode != 32">
或者仅允许数字:
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
只需查找您想要允许或禁止的任何号码的 unicode。
我在以下位置找到了这个解决方案:http://help.dottoro.com/ljlkwans.php
按预期工作。
<script type="text/javascript">
function FilterInput (event) {
var keyCode = ('which' in event) ? event.which : event.keyCode;
isNumeric = (keyCode >= 48 /* KeyboardEvent.DOM_VK_0 */ && keyCode <= 57 /* KeyboardEvent.DOM_VK_9 */) ||
(keyCode >= 96 /* KeyboardEvent.DOM_VK_NUMPAD0 */ && keyCode <= 105 /* KeyboardEvent.DOM_VK_NUMPAD9 */);
modifiers = (event.altKey || event.ctrlKey || event.shiftKey);
return !isNumeric || modifiers;
}
</script>
< body>
The following text field does not accept numeric input:
<input type="text" onkeydown="return FilterInput (event)" />< /body>
它允许文本和!“#$%&,但您可以调整它,将它们添加到验证中,通过删除返回中的 ! 来仅允许数字
代码可用于防止用户输入除数字之外的任何其他字符。
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
function keyispressed(e){
var charval= String.fromCharCode(e.keyCode);
if(isNaN(charval)){
return false;
}
return true;
}
</script>
</head>
<body>
<input type="text" onkeydown="return keyispressed(event);"/>
</body>
</html>
针对 onkeyup 事件而不是 onkeydown 事件运行代码。通过这种方式,您可以访问最后一次击键的结果,其中 onkeyup 事件在按下某个键时执行,而不知道其结果。
这是一个简单的方法。仅允许数字
const isNumberKey = (e: any) =>
{
if (e.key.length > 1)
{
return true;
}
const charCode = e.charCodeAt(0);
if (charCode < 48 || charCode > 57)
{
return false;
}
return true;
};