<!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>Document</title>

 </head>

 <body>

   <table id="keybord">

     <tr>

       <td><input /></td>

       <td><input /></td>

       <td><input /></td>

       <td><input /></td>

     </tr>

     <tr>

       <td><input /></td>

       <td><input /></td>

       <td><input /></td>

       <td><input /></td>

     </tr>

     <tr>

       <td><input /></td>

       <td><input /></td>

       <td><input /></td>

       <td><input /></td>

     </tr>

   </table>

   <script type='text/javascript' src='jquery.js'></script>

   <script type="text/javascript">

     $(function(){

       var baseIndex=100;

       $('#keybord').find('tr').each(function(r){

         $(this).find('td').each(function(c){

           $(this).find('input').attr('tabindex',r*100+c+baseIndex).addClass('tbInput');

         });

       });

       $('#keybord .tbInput').live('keydown',function(evt){

         var tabIndex=parseInt($(this).attr('tabindex'));

           switch(evt.which){

             case 38://up

               tabIndex-=100;

               break;

             case 40://down

               tabIndex+=100;

               break;

             case 37://left

               tabIndex--;

               break;

             case 39://right

               tabIndex++;

               break;

             default:

               return;

           }

           if(tabIndex>0){

             $('#keybord .tbInput[tabindex]='+tabIndex+'}').focus();

             return false;

           }

           return true;

       });

     })

   </script>

 </body>

 </html>

js键盘操作事件的更多相关文章

  1. vue.js 键盘enter事件的使用

    在监听键盘事件时,我们经常需要检查常见的键值.Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -- ...

  2. js常用操作事件

    触发描述 方法 用法 点击 onclick="method();"   变换 onchange="testChange();"   双击 ondblclick= ...

  3. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  4. javascript - 可编辑表格控件 支持全键盘操作(无JS框架)

    项目中经常会用到表格编辑控件,网上也有不少,但是确实没有完全符合我要求的, 自己写一个吧! 1.该控件支持 数据显示列,文本编辑列,选择列,下拉列,索引列,删除列 六种列类型 2.支持全键盘操作,自定 ...

  5. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

  6. Js键盘事件全面控制，回车按键事件，键盘对应按键码，按键事件兼容各个浏览器。

    在网上查询的按键码如下: 一.键盘按键和键盘对应代码表:   字母按键码A <--------> 65 B <--------> 66 C <--------> 6 ...

  7. 【three.js第七课】鼠标点击事件和键盘按键事件的使用

    当我们使用鼠标操作three.js渲染出的对象时,不仅仅只是仅限用鼠标对场景的放大.缩小.旋转而已,还有鼠标左键.右键的点击以及键盘各种按键等等的事件.我们需要捕获这些事件,并在这些事件的方法里进行相 ...

  8. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  9. JS实现 键盘操作

    JS实现 键盘操作: 详情可以去其逛网查看其API并下载,地址:http://craig.is/killing/mice <!DOCTYPE html PUBLIC "-//W3C// ...

随机推荐

  1. centos6.6 设置静态网络

    [root@localhost ~]# vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0HWADDR=08:00:27:3D:5F:38 ...

  2. Fragment 与 Fragment 相互传值

    方法: 1 接口回调 2 用一个单例类 3 bundle 4 获取fragment实例 , setter getter 传值

  3. head标签掉到body里的问题

    HTML最开始的标签   <!DOCTYPE html>在其之前不能有任何的内容,否则head里的内容就会掉到body里,导致譬如网站的图标icon无法更新等的功能问题

  4. CANopen笔记2

    PDO 过程数据对象用于在节点之间传送过程数据,如I/O模块I/O状态读取和设定,模拟量采集和模拟量输出等等,协议考虑从机硬件限制最多支持4组PDO,每组包含一个RPDO和一个TPDO.The Gol ...

  5. 【CC评网】2013.第41周 不求排版，简单就好

    书单 碰上国庆,加上这周,消化掉几本书: <软件随想录>:Joel的随想录,也就是他Blog上的文章的摘选:整本书看下来轻松:写了篇读书笔记[传送门]: <中国在梁庄>:这本书 ...

  6. python_way day15 HTML-DAY2 HTML-DAY2、JS

    python_way day15 HTML-DAY2 html-css回顾 javascript 一.html-css回顾 1.input与+,-号的写法 <!DOCTYPE html> ...

  7. 《Linux内核设计的艺术》学习笔记（三）Jcond指令

    参考书籍:<Assembly Language for x86 Processors (7th Edition)> ◆ JMPI指令: JMPI是x86实模式下的段间跳转指令: BOOTS ...

  8. 写XML配置文件时的一个乱码问题

    首先我们用文本文档写一个xml文件如下: <?xml version="1.0" encoding="gb2312"?> <a> < ...

  9. HDU3247 AC自动机+dp

    题意:给出n个资源,m个病毒,将资源串拼接成一个串,必须包含所有的资源串,可以重叠,但是不能包含病毒,问最小的长度为多少 题解:所有串建AC自动机.对以资源串结尾的结点跑bfs,求出到其他资源串结尾的 ...

  10. hdu3060Area2(任意多边形相交面积)

    链接 多边形的面积求解是通过选取一个点(通常为原点或者多边形的第一个点)和其它边组成的三角形的有向面积. 对于两个多边形的相交面积就可以通过把多边形分解为三角形,求出三角形的有向面积递加.三角形为凸多 ...