利用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 相关文章推荐
一个无限级XML绑定跨框架菜单(For IE)
Jan 27 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 Javascript
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正则走开
2008/03/15 PHP
用循环或if语句从json中取数据示例
2014/08/18 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
工作中常用js功能汇总
2020/11/07 Javascript
python检测远程端口是否打开的方法
2015/03/14 Python
Python中的Matplotlib模块入门教程
2015/04/15 Python
python实现发送邮件功能
2017/07/22 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
python移位运算的实现
2019/07/15 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
Python 转换文本编码实现解析
2019/08/27 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
采购主管工作职责
2013/12/12 职场文书
优秀幼教自荐信
2014/02/03 职场文书
小小的船教学反思
2014/02/21 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
大学生自我评价范文
2015/03/03 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
Mysql 设置boolean类型的操作
2021/06/04 MySQL
Python语言规范之Pylint的详细用法
2021/06/24 Python
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
python游戏开发Pygame框架
2022/04/22 Python
Python开发五子棋小游戏
2022/05/02 Python