JavaScript 键盘事件
1、onkeypress 事件:当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function displayKey(e) {
if (e.keyCode)
keyCode = e.keyCode;
else
keyCode = e.which;
character = String.fromCharCode(keyCode);
alert(character);
}
</script>
</head>
<body οnkeypress="displayKey(event);">
</body>
</html>
2、onkeyup 事件:当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function displayKey(e) {
if (e.keyCode)
keyCode = e.keyCode;
else
keyCode = e.which;
character = String.fromCharCode(keyCode);
alert(character);
}
</script>
</head>
<body οnkeyup="displayKey(event);">
</body>
</html>
3、onkeydown事件:当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function displayKey(e) {
if (e.keyCode)
keyCode = e.keyCode;
else
keyCode = e.which;
character = String.fromCharCode(keyCode);
alert(character);
}
</script>
</head>
<body οnkeydοwn="displayKey(event);">
</body>
</html>
当键盘事件为 onkeyup、onkeydown 的时候,alert(...) 出的都是大写,并且enter、ctrl键也会有输出;
但是使用onkeypress 就可以正确的捕获按下键的大小写。
执行顺序:
onkeydown --> onkeypress --> onkeyup