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>