如何找出什么字符键被按下?

我想找出什么字符键是按跨浏览器兼容的方式在纯 Javascript。

290877 次浏览

用这个:

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插件,可以识别按下的键序列。

例如:

<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。没有更多的任意数字代码!

注意: 不推荐使用旧属性(.keyCode.which)。

node.addEventListener('keydown', function(event) {
const key = event.key; // "a", "1", "Shift", etc.
});

如果希望确保只输入单个字符,请选中 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事件的结果将字符串输入到输入中,然后从该字符串获取第一个字符,或者循环通过它

(对于 shift 键等也有例外)

然后在每个事件结束时,只需将输入的 value重置为一个空字符串