利用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 相关文章推荐
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
老生常谈JavaScript数组的用法
Jun 10 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
vue.js表格分页示例
Oct 18 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
Vue-Router的使用方法
Sep 05 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 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下10件你也许并不了解的事情
2008/09/11 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
php基础教程
2015/08/26 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
Python yield使用方法示例
2013/12/04 Python
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
匡威英国官网:Converse英国
2018/12/02 全球购物
三好学生自我鉴定
2013/12/17 职场文书
煤矿班组长的职责
2013/12/25 职场文书
2015年见习期工作总结
2014/12/12 职场文书
2014年度考核工作总结
2014/12/24 职场文书
介绍信怎么写
2015/01/30 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL