JavaScript：在keydown事件中输入验证

问题描述：

我试图在事件的过程中对用户文本输入进行信息验证。我试图在事件中验证的原因是因为我不想在开头的input框中显示那些被认为是非法的字符。JavaScript：在keydown事件中输入验证

我写的验证是这样的，

function validateUserInput(){ 
    var code = this.event.keyCode; 
    if ((code<48||code>57) // numerical 
     &&code!==46 //delete 
     &&code!==8 //back space 
     &&code!==37 // <- arrow 
     &&code!==39) // -> arrow 
    { 
    this.event.preventDefault();   
    } 
}

我可以继续下去，这样，但是我看到这个实现的缺点。例如：

当我提出更多条件时，条件语句变得越来越长。
keyCodes可能因浏览器而异。
我不仅要检查什么是不合法的，还必须检查什么是例外。在上面的例子中，删除，退格和箭头键是例外。

但是我不想丢失的功能是不要在textarea中显示输入，除非它通过验证。（如果用户试图在textarea中输入非法字符，则根本没有任何内容）这就是为什么我没有在keyup事件中进行验证。

所以我的问题是：

是否有更好的方法来验证输入在事件不是检查由keyCodekeyCode？
在浏览器显示它之前，还有其他方法可以捕获除事件以外的用户输入吗？还有一种方法可以对其进行验证？

感谢您的帮助提前。

答

如果你检查打印键，而这正是您似乎在做，您应该使用keypress事件，因为这是唯一可以获得有关按键代表的字符的可靠信息的地方。您无法在事件中可靠地检测到数字按键。另外，禁止方向键和删除/退格键是一个坏主意。你从这样做中获得什么？

还有一些错误：在Firefox中，你需要从传递到事件处理函数的参数Event对象，如果您使用的是DOM0事件处理函数，而不是addEventListener()或attachEvent()，你应该使用return false;来抑制默认行为。这里是我推荐的代码：

var input = document.getElementById("your_input_id"); 

input.onkeypress = function(evt) { 
    evt = evt || window.event; 
    var charCode = evt.which || evt.keyCode; 
    var charStr = String.fromCharCode(charCode); 
    if (/\d/.test(charStr)) { 
     return false; 
    } 
};

是的，onkeypress很好地工作。非常感谢！ – c4il 2010-06-08 16:40:21

答

我不认为你需要preventDefault部分。如果要查找密钥（按event.keyCode或使用组合的例如event.ctrlKey + event.keyCode），则检查是否允许keyCode。如果是，只需返回true，否则返回false。如果返回false，则键输入将不会写入输入字段，否则将会输入。

我想不出更好的方法来使用keyCode。如果你想检查特定的字符值，你可以使用，但它会一直循环查看你想验证的keyCode。可能是一个switch ... case可以提供更多的可读性。

下面是我用一个keydown事件处理程序的代码（只是为了演示，它实际上并没有做任何事情）：

function handleKey(e, thisFld) { 
     thisFld = (thisFld || this); 
       e = e || event; 
    if (!e) { 
     return true; 
    } 

    var isCtrl = e.ctrlKey, 
     isShift = e.shiftKey, 
     isAlt = e.altKey, 
     kc = e.keyCode || e.which, 
     codes = [27, 38, 40], 
     keys = { 
       escape: 27, 
       up: 38, 
       down: 40, 
       ins: 45, 
       del: 46, 
       one: 49 
       }; 

    if (isCtrl && kc === keys.del) { ... } 
    if (isAlt && kc === keys.ins) { ... } 
     //etc 
    return true; 
}

感谢您的信息。 preventDefault不是必需的。也应用了String.fromCharCode。 – c4il 2010-06-08 16:43:05

答

这里是一个小提琴，你可以玩，可以提供更多的见解。

的jsfiddle：keydown/keypress demo w/ info display

这样看来，最新的浏览器使用的preventDefault（）。下面的代码是相似，我穿上的jsfiddle，但独立的，并且可以粘贴到您可以访问本地测试HTML文件（注意它的移动友好的设备测试。

<html> 
<head> 
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, user-scalable=no"/> 
<style> 
.b {color:blue;} 
.r {color:red;} 
input {font-size:18px;} 
</style> 
<script> 
function byId(el) {return document.getElementById(el)} 
function sfcc (n) {return String.fromCharCode(n);} 
function foo(event) { 
    var he='&#x'+event.keyIdentifier.split('+')[1]+';'; 
    var html='' 
    var cn=event.target.className; 
    html+='kc: [<span class="b">'+sfcc(event.keyCode)+'</span>] '; 
    html+='wh: [<span class="b">'+sfcc(event.which)+'</span>] '; 
    html+='he: [<span class="b">'+he+'</span>]<br>'; 
    for (i in event) 
     if (["string","boolean","number"].indexOf(typeof event[i]) >-1 && i.toUpperCase()!=i) 
      html+='<span>'+i + '</span>: [<span class="r">'+event[i]+'</span>]<br>'; 
    byId('kc').innerHTML=html; 
    switch (cn) { 
     case "pd": event.preventDefault(); return; 
     case "rf": return false; 
    } 
} 
</script> 
</head> 
<body> 
kp/pd: <input class="pd" type="text" onkeypress="foo(event)"/><br> 
kp/rf: <input class="rf" type="text" onkeypress="foo(event)"/><br> 
kd/pd: <input class="pd" type="text" onkeydown="foo(event)"/><br> 
kd/rf: <input class="rf" type="text" onkeydown="foo(event)"/><br> 
<div id="kc"></div> 
</body> 
</html>

顺便使用event.returnValue = false可能会工作 - 没有检查 – jaf0 2012-11-17 19:45:06

答

所以，我发现按键是伟大的可打印字符，并且的keydown所有的休息。您可以在keypress检查event.charCode为可打印字符（应该是0，不可打印）。您可以在使用event.keyCode的箭头和这样的。

这就是我刚刚在Chrome和Firefox中使用自动完成功能的原因。

JavaScript：在keydown事件中输入验证

相关推荐