我想找出什么字符键是按跨浏览器兼容的方式在纯 Javascript。
用这个:
function onKeyPress(evt){ evt = (evt) ? evt : (window.event) ? event : null; if (evt) { var charCode = (evt.charCode) ? evt.charCode :((evt.keyCode) ? evt.keyCode :((evt.which) ? evt.which : 0)); if (charCode == 13) alert('User pressed Enter'); } }
“清除”JavaScript:
function myKeyPress(e){ var keynum; if(window.event) { // IE keynum = e.keyCode; } else if(e.which){ // Netscape/Firefox/Opera keynum = e.which; } alert(String.fromCharCode(keynum)); }
<input type="text" onkeypress="return myKeyPress(event)" />
JQuery:
$("input").keypress(function(event){ alert(String.fromCharCode(event.which)); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input/>
这个问题在这里有一百万个副本,但是这里还是要重复一遍:
document.onkeypress = function(evt) { evt = evt || window.event; var charCode = evt.keyCode || evt.which; var charStr = String.fromCharCode(charCode); alert(charStr); };
我所见过的关键事件的最佳参考是 http://unixpapa.com/js/key.html。
**check this out** <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(document).keypress(function(e) { var keynum; if(window.event) { // IE keynum = e.keyCode; } else if(e.which) { // Netscape/Firefox/Opera keynum = e.which; } alert(String.fromCharCode(keynum)); var unicode=e.keyCode? e.keyCode : e.charCode; alert(unicode); }); }); </script> </head> <body> <input type="text"></input> </body> </html>
我最喜欢的以复杂方式完成这项工作的库之一是 捕鼠器。
它有各种各样的插件,其中之一是 record插件,可以识别按下的键序列。
record
例如:
<script> function recordSequence() { Mousetrap.record(function(sequence) { // sequence is an array like ['ctrl+k', 'c'] alert('You pressed: ' + sequence.join(' ')); }); } </script> <button onclick="recordSequence()">Record</button>
更新和更干净: 使用 event.key。没有更多的任意数字代码!
event.key
注意: 不推荐使用旧属性(.keyCode和 .which)。
.keyCode
.which
node.addEventListener('keydown', function(event) { const key = event.key; // "a", "1", "Shift", etc. });
如果希望确保只输入单个字符,请选中 key.length === 1,或确保它是您所期望的字符之一。
key.length === 1
Mozilla 文档
支援的浏览器
document.onkeypress = function(event){ alert(event.key) }
试试:
<table> <tr> <td>Key:</td> <td id="key"></td> </tr> <tr> <td>Key Code:</td> <td id="keyCode"></td> </tr> <tr> <td>Event Code:</td> <td id="eventCode"></td> </tr> </table> <script type="text/javascript"> window.addEventListener("keydown", function(e) { //tested in IE/Chrome/Firefox document.getElementById("key").innerHTML = e.key; document.getElementById("keyCode").innerHTML = e.keyCode; document.getElementById("eventCode").innerHTML = e.code; }) </script>
* 注意: 这在“运行代码片段”中起作用
这个网站做同样的代码以上: Keycode.info
检测 JavaScript 中的键盘按键:
document.addEventListener( "keydown", function(event) { console.log(event.key); }, );
BH
如果你试图通过 DOM 在客户端 JavaScript 中获取值,那么我发现一个可靠的替代方案是创建一个不可见的 <input>元素,它有一个绝对位置和(几乎)没有宽度,位于你输入的任何地方的下方,然后当用户点击或设置焦点到他们应该输入的任何东西时,调用输入的 focus()函数,并使用 oninput事件的结果将字符串输入到输入中,然后从该字符串获取第一个字符,或者循环通过它
<input>
focus()
oninput
(对于 shift 键等也有例外)
然后在每个事件结束时,只需将输入的 value重置为一个空字符串
value