键盘事件 

 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>

 

posted @ 2019-07-28 23:42  zuiaimiusi  阅读(191)  评论(0)    收藏  举报