js键盘操作事件 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6 </head>
 7 <body>
 8   <table id="keybord">
 9     <tr>
10       <td><input /></td>
11       <td><input /></td>
12       <td><input /></td>
13       <td><input /></td>
14     </tr>
15     <tr>
16       <td><input /></td>
17       <td><input /></td>
18       <td><input /></td>
19       <td><input /></td>
20     </tr>
21     <tr>
22       <td><input /></td>
23       <td><input /></td>
24       <td><input /></td>
25       <td><input /></td>
26     </tr>
27   </table>
28   <script type='text/javascript' src='jquery.js'></script> 
29   <script type="text/javascript">
30     $(function(){
31       var baseIndex=100;
32       $('#keybord').find('tr').each(function(r){
33         $(this).find('td').each(function(c){
34           $(this).find('input').attr('tabindex',r*100+c+baseIndex).addClass('tbInput');
35         });
36       });
37       $('#keybord .tbInput').live('keydown',function(evt){
38         var tabIndex=parseInt($(this).attr('tabindex'));
39           switch(evt.which){
40             case 38://up
41               tabIndex-=100;
42               break;
43             case 40://down
44               tabIndex+=100;
45               break;
46             case 37://left
47               tabIndex--;
48               break;
49             case 39://right
50               tabIndex++;
51               break;
52             default:
53               return;
54           }
55           if(tabIndex>0){
56             $('#keybord .tbInput[tabindex]='+tabIndex+'}').focus();
57             return false;
58           }
59           return true;
60       });
61     })
62   </script>
63 </body>
64 </html>

 

posted @ 2015-03-18 17:20  MissBean  阅读(501)  评论(0)    收藏  举报