Javascript 事件对象(六)键盘事件

keyCode
获取用户按下键盘的哪个按键

 1 <!DOCTYPE HTML>

 2 <html>

 3 <head>

 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 5 <title>无标题文档</title>

 6 <script>

 7 /*

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

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

10 

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

12     ctrlKey,shiftKey,altKey 布尔值

13     当一个事件发生的时候,如果ctrl || shift || alt 是按下的状态,返回true,否则返回false

14 */

15 

16 document.onkeydown = function(ev) {

17     

18     //alert(1);

19     var ev = ev || event;

20     //alert(ev.keyCode);

21     

22 }

23 

24 document.onclick = function(ev) {

25     var ev = ev || event;

26     

27     alert(ev.ctrlKey);

28 }

29 </script>

30 </head>

31 

32 <body>

33 </body>

34 </html>

 

键盘事件实例:

 1 <!DOCTYPE HTML>

 2 <html>

 3 <head>

 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 5 <title>无标题文档</title>

 6 <script>

 7 window.onload = function() {

 8     

 9     var oText = document.getElementById('text1');

10     var oUl = document.getElementById('ul1');

11     

12     oText.onkeyup = function(ev) {

13         

14         var ev = ev || event;

15         

16         //alert(this.value);

17         if ( this.value != '' ) {

18             

19             if (ev.keyCode == 13 && ev.ctrlKey) {

20             

21                 var oLi = document.createElement('li');

22                 oLi.innerHTML = this.value;

23                 

24                 if ( oUl.children[0] ) {

25                     oUl.insertBefore( oLi, oUl.children[0] );

26                 } else {

27                     oUl.appendChild( oLi );

28                 }

29                 

30             }

31             

32         }

33         

34     }

35     

36 }

37 </script>

38 </head>

39 

40 <body>

41     <input type="text" id="text1" />

42     <ul id="ul1"></ul>

43 </body>

44 </html>

 

键盘控制div移动:

 1 <!DOCTYPE HTML>

 2 <html>

 3 <head>

 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 5 <title>无标题文档</title>

 6 <style>

 7 #div1 {width: 100px; height: 100px;  background: red; position: absolute;}

 8 </style>

 9 <script>

10 window.onload = function() {

11     

12     var oDiv = document.getElementById('div1');

13     

14     //不是所有元素都能够接收键盘事件,能够响应用户输入的元素,能够接收焦点的元素就能够接收键盘事件

15     

16     //onkeydown : 如果按下不抬起,那么会连续触发

17     //定时器

18     document.onkeydown = function(ev) {

19         

20         var ev = ev || event;

21         

22         switch(ev.keyCode) {

23             case 37:

24                 oDiv.style.left = oDiv.offsetLeft - 10 + 'px';

25                 break;

26             case 38:

27                 oDiv.style.top = oDiv.offsetTop - 10 + 'px';

28                 break;

29             case 39:

30                 oDiv.style.left = oDiv.offsetLeft + 10 + 'px';

31                 break;

32             case 40:

33                 oDiv.style.top = oDiv.offsetTop + 10 + 'px';

34                 break;

35         }

36         

37     }

38     

39 }

40 </script>

41 </head>

42 

43 <body>

44     <div id="div1"></div>

45 </body>

46 </html>

 

 

 

 

你可能感兴趣的:(JavaScript)