6

在我的 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 and event.keyCode == 0
2. 如果输入左箭头, event.which == 0 and event.keyCode == 37

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

4

4 回答 4

2

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

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/

于 2013-03-30T05:38:02.213 回答
1

我不久前想出了这个：

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 示例。

于 2013-03-30T05:24:30.917 回答
1

检查布莱恩特威廉姆斯对这个问题的回答：

如何在 Chrome 和 IE 中跟踪箭头键？

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

于 2013-03-30T05:26:34.393 回答
0

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

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

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

于 2013-03-30T05:29:38.510 回答