keyCode 问题 - 无法阻止输入 % 字符答案

【问题标题】：keyCode issue - Can't prevent entering the % characterkeyCode 问题 - 无法阻止输入 % 字符
【发布时间】：2013-03-30 05:18:14
【问题描述】：

在我的 HTML 页面中有一个输入文本字段。我只想输入键盘上的数字键和左/右箭头。我尝试了以下 JavaScript，但遇到了问题。

<input onkeypress="return allowNumberOnly(event)" />

function allowNumberOnly(event) {
    event = event || window.event;
    var charCode = (event.which) ? event.which : event.keyCode;

    //keyCode 48-57 represent the number 0-9
    //keyCode 37,39 represent the Left and Right arrow
    //keyCode 46 represent the Delete key
    //keyCode 8 represent the Backspace key

    return charCode == 37 || charCode == 39 || charCode == 46 || charCode == 8
              || (charCode >= 48 && charCode <= 57);
}

在测试这段代码后，我发现了一个问题，左箭头和%特殊字符的keyCode都是37。所以我不能阻止用户输入%字符同时允许左箭头。我不知道为什么会这样。我一直认为 keyCode 对于键盘上的每个键都应该是唯一的。我想过使用 onkeyup 而不是 onkeypress。但是 onkeyup 将允许用户首先输入无效字符，然后从输入文本中删除。这种行为不是我想要的。任何建议将不胜感激。

我在 FireFox 中调试了代码，发现有以下不同。

1.如果输入 %, event.which == 37 和 event.keyCode == 0
2.如果输入左箭头，event.which == 0 and event.keyCode == 37

使用这种差异似乎可以解决问题。我将继续在 IE 和 Chrome 中尝试。

【问题讨论】：

小提琴：jsfiddle.net/gW6k3

标签： javascript keycode

【解决方案1】：

此链接包含有关键盘事件的更多信息

http://unixpapa.com/js/key.html

我也做了jQuery版本

$('input').keypress( function( e ){ 

    var code = e.which || e.keyCode ; 

    if ( !( e.shiftKey == false &&
            (
               code == 46 ||
               code == 8 ||
               code == 37 ||
               code == 39 ||
               ( code >= 48 && code <= 57 ) 
            )
         )
    ){

         e.preventDefault();                   
    }

});

查看http://jsfiddle.net/UGpUJ/

【讨论】：

我不认为发布一个指向有关该问题的一般信息的链接是一个足够的答案。
@CiananSims 我做了一个 jQuery 解决方案。请检查更新的答案！

【解决方案2】：

查看 Bryant Williams 对此问题的回答：

how can i track arrow keys in Chrome and IE?

他建议检查 charCode 是否==0，或者检查 shift 键是否被按下。

【讨论】：

@Nile 添加 event.shiftKey == false 确实排除了 % 字符，但它也阻止了我输入组合键 Shift + Left。我想使用这个组合键来选择输入文本字段中的内容。

【解决方案3】：

我想出了这个a while ago：

var numbersOnly = function(e){
    var charCode = (typeof e.which === "number") ? e.which : e.keyCode,
        chr = String.fromCharCode(charCode); //convert it to a character

    if(isNaN(parseInt(chr, 10))) e.preventDefault();
}

用法：

<input type="text" name="phoneNumber" onkeypress="numbersOnly(event);">

基本上，我们在这里所做的是获取使用的关键代码，将其转换为等效的字符代码，然后测试字符代码而不是关键代码。我发现这种方法比我遇到的任何其他方法都好用，而且效果很好。

JS Bin Example.

【讨论】：

OP 还希望允许 < 和 > 键（因此问题与 %）。
@JaredFarrish 啊，在 Chrome 中看到箭头键有效，虽然在 Fx 中测试它我发现他们没有。
我怀疑这是因为 Firefox 将 < 和 % 视为 flipped .keyCode and .charCode。 Chrome 似乎忽略了< 按下。
嗯……也许吧。这似乎很奇怪。（旁注：< 和 > 让我觉得你在谈论人字形，所以对于未来的读者：不要这么认为。）
@Nile 你的小提琴在 jsbin 中工作正常，但在 jsfiddle jsfiddle.net/vnodkumar1987/uhufp/2 中不起作用（已添加基数参数）

【解决方案4】：

使用 onKeydown 事件。对于 %，它是 53。

检查此链接以检查键码：http://kyokodaniel.com/tech/utils/keycodes.html

http://www.west-wind.com/WestwindWebToolkit/samples/Ajax/html5andCss3/keycodechecker.aspx

【讨论】：