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 事件对象（六）键盘事件,布布扣,bubuko.com
时间： 2024-10-21 14:59:33