<!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. Python if条件语句

    1. if 条件语句 if 条件: 内容1 内容2 else: 内容3 内容4 # 一个等号是赋值(=) # 两个等号是比较(==) #不等号(!=) #if 条件1 and 条件2(并且) #if ...

  2. 【leetcode❤python】 20. Valid Parentheses

    #-*- coding: UTF-8 -*-#利用栈的思想#如果输入的左测扩则入栈,如果输入为右侧扩,判断其是否与当前栈顶配对,如果匹配则删除这一对,否则return False#'(', ')', ...

  3. JAVA_输入输出流 异常处理

    输入输出流 文件创建

  4. Java——再看IO

    一.编码问题 utf-8编码中,一个中文占3个字节,一个英文占1个字节:gbk编码中,一个中文占2个字节,一个英文占1个字节. Java是双字节编码,为utf-16be编码,是说一个字符(无论中文还是 ...

  5. CSS选择器、优先级与匹配原理（转）

    CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...

  6. 职责链模式，chain of responsibility

    定义: 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这个对象连城一条链,并沿着这条链传递该请求,知道有一个对象处理它为止. 客户端并不知道哪个对象会最终处理这个请求,这样 ...

  7. ZOJ 3819 Average Score（平均分）

    Description 题目描述 Bob is a freshman in Marjar University. He is clever and diligent. However, he is n ...

  8. javascript权威指南笔记--javascript语言核心（一）

    1.javascript的数据类型分为两类:原始类型和对象类型. 原始类型包括字符串.数字.布尔值.null.undefined. 对象是属性的集合,每个对象都由“名/值”对构成.数组和函数是特殊的对 ...

  9. java 解析汉字拼音

    pinyin4j的使用很方便,一般转换只需要使用PinyinHelper类的静态工具方法即可:    String[] pinyin = PinyinHelper.toHanyuPinyinStrin ...

  10. LTE Module User Documentation（翻译4）—— 使用 Fading Trace

    LTE用户文档 (如有不当的地方,欢迎指正!) 7 使用 Fading Trace   本节描述如何在 LTE 仿真中使用 fading traces .   (1)生成 Fading Traces  ...