鍵盤事件： keydown、keypress、keyup
<script>
/*
對滑鼠事件的支援主要遵循是DOM0級
keydown:當使用者按下鍵盤的任意鍵時觸發，而且如果按下不放，會重複觸發此事件
keypress:當使用者按下鍵盤的字元鍵時觸發，而且如果按住不放的話，會重複觸發字事件
keyup:當使用者釋放鍵盤時觸發
*/
// 顯示鍵碼
var input = document.getElementById('input');
input.onkeyup = function(event){
var event = event || window.event;
console.log(event.keyCode);
}
// 顯示字元編碼
/*
keypress事件意味着按下的鍵會影響螢幕中文本的顯示
IE9+,Firefox,chrome,Safari的event對象都支援charCode屬性，而IE8-,Opera則是在keyCode屬性中儲存字元的ASCII編碼，
是以想要跨浏覽器的方式擷取字元的編碼，先檢測charCode屬性是否可用，如果不可用則使用keyCode屬性
*/
input.onkeypress = function(event){
var event = event || window.event;
if( event.charCode )
{
console.log(event.charCode);// IE9+,Firefox,chrome,Safari
}
else{
console.log(event.keyCode);// IE8-,Opera
}
}
</script>
案例
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>鍵盤控制小方塊運動</title>
<style>
button{
width: 100px;
height: 50px;
background: linear-gradient(to left, #999 0%,#ffcccc 100%);
border: none;
border-radius: 5px;
outline: none;
font-size: 18px;
color: #fff;
}
div{
width: 100px;
height: 100px;
margin-top: 10px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<button id="btn">加速</button>
<div></div>
</body>
</html>
<script>
var btn = document.getElementById('btn');
var div = document.getElementsByTagName('div')[0];
var speed = 5;
document.onkeydown = function(event){
var event = event || window.event;
switch(event.which)// 與event.keyCode|| event.charCode相似
{
case 37:
div.style.left = div.offsetLeft - speed +'px';
break;
case 38:
div.style.top = div.offsetTop - speed + 'px';
break;
case 39:
div.style.left = div.offsetLeft + speed +'px';
break;
case 40:
div.style.top = div.offsetTop + speed + 'px';
break;
}
}
</script>
![兩個簡單原生js小案例(點選彈出圖層 + 全屏彈幕效果)[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)