获取小键盘(数字键盘)键的正确 keyCode

IT技术 javascript jquery
2021-03-13 23:22:57

当按下键盘上的键[0..9](数字)时,通过调用获得代码[96..105]尽管这些代码对应于字符:'abcdefgh i' 而不是[0..9]String.fromCharCode(event.keyCode)

问题:

我在表单中有 3 个输入。用户只允许在第一个输入中输入。当用户按下键盘上的键时,某些功能需要对其进行过滤并将其写入第二个输入,如果按下的键是数字,否则必须将其写入第三个输入。如何纠正?

我在 JSFiddle 中的实现

6个回答

使用keypress处理程序:

[somelement].onkeypress = function(e){
  e = e || event;
  console.log(String.fromCharCode(e.keyCode));
}

另请参阅:此 W3C 测试文档

如果你想使用keyuporkeydown处理程序,你可以减去 48 frome.keyCode得到数字(所以String.fromCharCode(e.keyCode-48)

e=e || 是什么意思 事件 ?
2021-04-22 23:22:57
在大多数浏览器中,键事件被发送到处理程序。在 Internet Explorer 中并非如此。该行的意思是:从处理程序函数的参数中获取给定的事件 e,如果为 false 或 null,则使用全局对象 (ie window)的事件
2021-05-01 23:22:57
+1 对您的评论:-)。你的代码效果很好。但小问题。我会在五秒后发送。
2021-05-10 23:22:57
为什么会根据触发的事件使用不同的 keyCode。我在键盘上使用相同的键!
2021-05-19 23:22:57

我使用以下 javascript 代码解决了这个问题。数字键盘按键之间的谎言96105但实数比小48键盘值与 keyup 或 keydown 处理程序一起使用。

var keyCode = e.keyCode || e.which;
if (keyCode >= 96 && keyCode <= 105) {
  // Numpad keys
  keyCode -= 48;
}
var number = String.fromCharCode(keyCode);
很好的解决方案,因为backspace使用按键不会被拾取。
2021-05-16 23:22:57

如果由于事件取消需要等原因按键无法使用,则有一种方法可以使用 keydown 执行此操作。在此测试中使用 if() 语句:

parseInt(event.keyIdentifier.substring(2),16) > 47 && parseInt(event.keyIdentifier.substring(2),16) < 58

或者,使用 jQuery 事件:

parseInt(event.originalEvent.keyIdentifier.substring(2),16) > 47 && parseInt(event.originalEvent.keyIdentifier.substring(2),16) < 58

这些示例假定“事件”是 keydown 事件。keyIdentifier 是一个十六进制数,表示相关字符的 unicode 值。使用 keyIdentifier,数字小键盘/小键盘上的数字和 QWERTY 键盘上方的数字都将具有相同的值,48 - 57 (U+0030 - U+0039),即使有 keyDown 事件也是如此。

浏览器中的 Unicode 值看起来像 U+0030 或 U+002F。解析此字符串以仅获取十六进制值,然后使用基数为 16 的 parseInt() 将其转换为基数 10。

效果很好,但仅适用于 Chrome(不适用于 FF、IE 或 Edge - 不确定是否适用于 Safari)。keyIdentifier只出现在规范草案中,后来被弃用(developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/...)。
2021-05-03 23:22:57

行。但是在 Firfox Gecko 中它不起作用。我使用波纹管代码,我很满意:)

[somelement].onkeypress = function(e){
  var singleChar=e.key || String.fromCharCode(e.keyCode);
  console.log(singleChar);
}

当按下键盘和小键盘中的数字时,onKeyPress 中的 event.charCode 返回相同的代码。但 onKeyDown(或 up)处的 event.keyCode 返回不同的代码。=> 获取字符:在 onKeyPress 事件 event.preventDefault() (或 event.returnValue=false 在 IE 上)使用 event.charCode 获取数字在 onKeyDown 事件中使用 event.keyCode