如何找出按下的字符键？
Posted
技术标签:
【中文标题】如何找出按下的字符键？【英文标题】：How to find out what character key is pressed? 【发布时间】：2010-12-23 05:27:43 【问题描述】：我想知道在纯 javascript 中以跨浏览器兼容的方式按下了哪个字符键。
【问题讨论】：
所有这些答案不都是针对“按下了什么键？”的问题吗？如果在执行时，javascript 代码想知道键盘上的某个键当前是否被按下怎么办？event.key 会直接给你按下的字符
【参考方案1】：
“清除”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/>【讨论】：
这适用于字母字符，但点/括号和其他印刷符号呢？ @VoVaVc：它也适用于那些人。关键是使用keypress 事件，它给你一个字符代码，而不是keyup 或keydown 给你一个键码。
@aljgom, e.key 仍然没有完整的浏览器支持。
不适用于必须按 shift 才能制作的符号，例如 !
@AndyMercer 密钥现在被所有主流浏览器支持：developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/…【参考方案2】：
这里有一百万个重复的问题，但无论如何这里又出现了：
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。
【讨论】：
【参考方案3】：更新更简洁：使用event.key。没有更多的任意数字代码！
注意：旧属性（
.keyCode和.which）已弃用。
node.addEventListener('keydown', function(event)
const key = event.key; // "a", "1", "Shift", etc.
);
如果您想确保只输入单个字符，请检查key.length === 1，或者它是您期望的字符之一。
Mozilla Docs
Supported Browsers
【讨论】：
这是针对 node.js 的吗？ 不，节点只是指任何 DOM 元素。如果你有 Node.js 连接到 UI，我想它会工作 某些移动设备的keydown不起作用它返回未定义【参考方案4】：试试：
<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>*注意：这适用于“运行代码 sn-p”
这个网站和我上面的代码一样：Keycode.info
【讨论】：
这是另一个类似的网站，但有一些额外的选项：keyjs.dev 在 chrome、xfce、意大利语键盘、西班牙语布局上，按“ 【参考方案5】：使用这个：
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');
【讨论】：
【参考方案6】：**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>
【讨论】：
这不是@Coyod 2009 年答案的几乎完全相同的副本吗？【参考方案7】：我最喜欢以复杂方式执行此操作的库之一是Mousetrap。
它配备了各种插件，其中一个是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>
【讨论】：
未捕获的类型错误：Mousetrap.record 不是 HTMLButtonElement.onclick (****.html:20) 的 recordSequence (****.html:12) 处的函数【参考方案8】：document.onkeypress = function(event)
alert(event.key)
【讨论】：
两个反对票，但现在解释为什么它被投票反对。我认为当您评论此答案的问题时会有所帮助。谢谢 很容易投票，我想你最好自己试试这个 sn-p :) 顺便说一句，标题很常见以上是关于如何找出按下的字符键？的主要内容，如果未能解决你的问题，请参考以下文章