zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    视图集
    子类视图
    Mixin扩展类
    GenericAPIView
    APIView
    ModelSerializer使用
    序列化和反序列化
    合并购物车
    pyplot基本绘制
    STL sort “invalid operator <”
  • 原文地址:https://www.cnblogs.com/MissBean/p/4347820.html
Copyright © 2011-2022 走看看