利用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 相关文章推荐
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
详解javascript事件冒泡
Jan 09 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
webpack结合express实现自动刷新的方法
May 07 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
js动态添加带圆圈序号列表的实例代码
Feb 18 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中如何在有限的内存中读取大文件
2013/07/02 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
WordPress网站性能优化指南
2015/11/18 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
python传递参数方式小结
2015/04/17 Python
Python实现批量下载图片的方法
2015/07/08 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
python标识符命名规范原理解析
2020/01/10 Python
Python魔术方法专题
2020/06/19 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
俄语专业毕业生推荐信
2013/10/28 职场文书
《桃花心木》教学反思
2014/02/17 职场文书
企业文化宣传标语
2014/06/09 职场文书
三人合伙协议书范本
2014/10/29 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
检察院起诉书
2015/05/20 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
JVM之方法返回地址详解
2022/02/28 Java/Android