js键盘事件

onkeydown:当键盘按键按下的时候触发

onkeyup:当键盘按键抬起的时候触发

event.keyCode:数字类型键盘按键的值键值

不是所有元素都能够接收键盘事件，能够响应用户输入的元素，能够接收焦点的元素就能接收键盘事件
onkeydown:如果按下不抬起，那么会连续触发

数字键盘上的键的键码值(keyCode)				功能键键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
0	96	8	104	F1	112	F7	118
1	97	9	105	F2	113	F8	119
2	98	*	106	F3	114	F9	120
3	99	+	107	F4	115	F10	121
4	100	Enter	108	F5	116	F11	122
5	101	-	109	F6	117	F12	123
6	102	.	110
7	103	/	111

字母和数字键的键码值(keyCode)

按键键码

A65J74S83149B66K75T84250C67L76U85351D68M77V86452E69N78W87553F70O79X88654G71P80Y89755H72Q81Z90856I73R82048957

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #box {
 8             width: 400px;
 9             height: 600px;
10             border: 1px solid;
11             margin: 50px auto 0;
12             position: relative
13         }
14 
15         #tank {
16             width: 50px;
17             height: 50px;
18             position: absolute;
19             left: 175px;
20             bottom: 0;
21             background: darkgreen
22         }
23     </style>
24 </head>
25 <body>
26 <div id="box">
27     <div id="tank"></div>
28 </div>
29 </body>
30 </html>
31 <script>
32     var box=document.getElementById('box')
33     var tank=document.getElementById('tank')
34     document.onkeydown=function(event)
35     //回车键 键值为13
36     {
37         if(event.keyCode==37) {
38 
39             /*if(tank.offsetLeft<=0){
40                 tank.style.left=0*/
41 
42             // 三目运算符
43             tank.style.left = tank.offsetLeft > 0 ? tank.offsetLeft - 3 + 'px' : 0
44 
45         }
46            /* else {
47                 tank.style.left=tank.offsetLeft - 3 + 'px'
48             }*/
49 
50         if(event.keyCode==39){
51 
52           /*  if(tank.offsetLeft>=box.offsetWidth-tank.offsetWidth){
53                 tank.style.left= box.offsetWidth-tank.offsetWidth+'px'
54             }else {*/
55             // 三目运算符
56                 tank.style.left=tank.offsetLeft <box.offsetWidth-tank.offsetWidth?tank.offsetLeft+ 3 + 'px':box.offsetWidth-tank.offsetWidth
57             }
58     }
59    /* document.onkeydown=function (event) {
60         console.log(event.keyCode)
61     }*/
62     // up dowm  press(窗口没有事件)
63 </script>