在我的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和event.keyCode == 37
使用这种差异似乎可以解决问题。我将继续尝试使用IE和Chrome。
答案 0 :(得分: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();
}
});
上查看
答案 1 :(得分:1)
我想出了这个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);">
基本上我们在这里做的是获取使用的密钥代码,将其转换为等效的char代码,然后测试char代码而不是密钥代码。我发现这种方法比我遇到的任何其他方法都要好得多,而且效果非常好。
答案 2 :(得分:1)
检查Bryant Williams对这个问题的回答:
how can i track arrow keys in Chrome and IE?
他建议检查charCode == 0,或检查是否按下了shift键。
答案 3 :(得分:0)
使用onKeydown事件。 %为53。
检查此链接以获取密钥代码检查:http://kyokodaniel.com/tech/utils/keycodes.html
http://www.west-wind.com/WestwindWebToolkit/samples/Ajax/html5andCss3/keycodechecker.aspx