用javascript模拟9宫格键盘

给朋友写的一个demo,比较简单,直接上代码了:

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml" >
  3 <head>
  4     <title>Untitled Page</title>
  5     <style type="text/css">
  6         #Text1
  7         {
  8             width: 164px;
  9         }
10     </style>
11 </head>
12 <body>
13
14     <p>
15         <input id="Text1" type="text" readonly="readonly" value="1" /></p>
16     <div style=" 168px; height: 176px">
17         <div id=1 style=" 51px; border: thin solid #000080;height: 56px;float: left; background-color: #C0C0C0; text-align: center; vertical-align: middle;">
18
19             1</div>
20         <div id=2 style=" 51px; border: thin solid #000080;height: 56px; float: left;text-align: center;">
21
22             2</div>
23         <div id=3 style=" 51px;border: thin solid #000080; height: 56px;float: left;text-align: center;">
24
25             3</div>
26         <div id=4 style=" 51px; border: thin solid #000080;height: 56px;float: left;text-align: center;">
27
28             4</div>
29              <div id=5 style=" 51px; border: thin solid #000080;height: 56px;float: left;text-align: center;">
30
31             5</div>
32              <div id=6
33             style="border: thin solid #000080;  51px; height: 56px; float: left; text-align: center;">
34
35             6</div>
36              <div  id=7 style=" 51px;border: thin solid #000080; height: 56px;float: left;text-align: center;">
37
38             7</div>
39              <div id=8  style=" 51px; border: thin solid #000080;height: 56px;float: left;text-align: center;">
40
41             8</div>
42              <div id=9 style=" 51px; border: thin solid #000080;height: 56px;float: left;text-align: center;">
43
44             9</div>
45     </div>
46     <br />
47     方向键或数字键选择，回车键确定。
48 </body>
49 </html>
50
51 <script language=javascript>
52
53     var cur = 1;
54     document.onkeydown = function () {
55         //向左
56         if (window.event.keyCode == 37) {
57             if (cur != 1 && cur != 4 && cur != 7) {
58                 document.getElementById(cur).style.background = "#FFFFFF";
59                 cur--;
60                 document.getElementById(cur).style.background = "#C0C0C0";
61             }
62         }
63
64         //向右
65         if (window.event.keyCode == 39) {
66             if (cur != 3 && cur != 6 && cur != 9) {
67                 document.getElementById(cur).style.background = "#FFFFFF";
68                 cur++;
69                 document.getElementById(cur).style.background = "#C0C0C0";
70             }
71         }
72
73         //向上
74         if (window.event.keyCode == 38) {
75             if (cur != 1 && cur != 2 && cur != 3) {
76                 document.getElementById(cur).style.background = "#FFFFFF";
77                 cur -= 3;
78                 document.getElementById(cur).style.background = "#C0C0C0";
79             }
80         }
81
82         //向下
83         if (window.event.keyCode == 40) {
84             if (cur != 7 && cur != 8 && cur != 9) {
85                 document.getElementById(cur).style.background = "#FFFFFF";
86                 cur += 3;
87                 document.getElementById(cur).style.background = "#C0C0C0";
88             }
89         }
90
91         //回车
92         if (window.event.keyCode == 13)
93             document.getElementById('Text1').value = cur;
94
95         //数字键
96         if (window.event.keyCode > 48 && window.event.keyCode < 58) {
97             document.getElementById(cur).style.background = "#FFFFFF";
98             cur = window.event.keyCode - 48;
99             document.getElementById(cur).style.background = "#C0C0C0";
100         }
101
102
103     }
104
105 </script>