1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <script type="text/javascript">
8
9 window.onload=function(event)
10 {
11 /*
12 键盘事件
13 onkeydown 按键被按下
14 对于onkeydown来说如果按着某个按键不松手，则事件就会一直触发
15 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快
16
17 onkeyup 按键被松开
18
19 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
20 */
21 document.onkeydown=function(event){
22 event=event||window.event;
23 /*
24 可以通过keyCode来获取按键的编码 通过它可以判断哪个按键被按下
25 除了keyCode,事件对象中还提供了几个属性
26 altKey
27 ctrlKey
28 shiftKey
29 这个三个用来判断alt ctrl 和 shift 是否被按下
30 如果按下则返回true，否则返回false
31 */
32 console.log(event.keyCode);
33 //判断一个y是否被按下
34 if(event.keyCode===89)
35 console.log("y被按下了");
36 //判断y和ctrl是否同时被按下
37 if(event.keyCode===89&&event.ctrlKey){
38 console.log("ctrl和y同时被按下");//获取input
39 }
40 };
41 var input=document.getElementsByTagName("input")[0];
42 input.onkeydown=function(event){
43 event=event||window.event;
44 console.log("按键被按下了");
45 /*
46 在文本框中输入内容，属于onkeydown的默认行为
47 如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
48 */
49 //return false;
50 //使文本框不能输入数字
51 if(event.keyCode>=48&&event.keyCode<=57){
52 return false;
53 }
54 };
55
56 document.onkeyup=function(){
57
58 };
59 };
60 </script>
61 <style type="text/css">
62 </style>
63 <body>
64 <input type="text"/>
65 <div style="width:100px;height:100px;background-color:red;"></div>
66 </body>
67 </html>