利用JS来控制键盘的上下左右键(示例代码)


Posted in Javascript onDecember 14, 2013

这是一个JS初级代码,想学JS的朋友,可以研究下或者扩展下,最好能用JS实现整个键盘的控制,那感觉就很有意思了。

具体代码如下:

<style>
tr.highlight{background:#08246B;color:white;}
</style>
<table border="1" width="70%" id="ice">
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
</table>
<script language="javascript">
<!--
//定义初始化行列
var currentLine=-1;
var currentCol=-1;
document.onkeydown=function(e){
  e=window.event||e;
  switch(e.keyCode){
    case 37: //左键
      currentCol--;
      changeItem();
      break;
    case 38: //向上键
      currentLine--;
      changeItem();
      break;
    case 39: //右键
      currentCol++;
      changeItem();
      break;
    case 40: //向下键
      currentLine++;
      changeItem();
      break;
    default:
      break;
  }
}
//方向键调用
function changeItem(){
  if(document.all)
    var it=document.getElementByIdx_x("ice").children[0];
  else
    var it=document.getElementByIdx_x("ice");
  for(i=0;i<it.rows.length;i++){
    it.rows[i].className="";
  }
  if(currentLine<0){
    currentLine=it.rows.length-1;
  }
  if(currentLine==it.rows.length){
  currentLine=0;
  }
  var objtab=document.all.ice;
  var objrow=objtab.rows[currentLine].getElementsByTagName_r("INPUT");
  if(currentCol<0){
    currentCol=objrow.length-1;
  }else if(currentCol==objrow.length){
    currentCol=0;
  }
  objrow[currentCol].select();
  //调试使用
  it.rows[currentLine].className="highlight";
}
//-->
</script>
Javascript 相关文章推荐
枚举JavaScript对象的函数
Dec 22 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
js中function()使用方法
Dec 24 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
浅谈js原生拖放
Nov 21 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
angular第三方包开发整理(小结)
Apr 19 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
JS短路原理的应用示例 精简代码的途径
Dec 13 #Javascript
代码触发js事件(click、change)示例应用
Dec 13 #Javascript
jquery获得option的值和对option进行操作
Dec 13 #Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 #Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 #Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 #Javascript
Extjs4中的分页应用结合前后台
Dec 13 #Javascript
You might like
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
javascript基础知识讲解
2017/01/11 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
python 异或加密字符串的实例
2018/10/14 Python
Python中作用域的深入讲解
2018/12/10 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
如何强制垃圾回收
2015/10/06 面试题
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
四年的个人工作自我评价
2013/12/10 职场文书
大学生毕业的自我评价分享
2014/01/02 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
工作简报怎么写
2015/07/21 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server