利用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页面的表格数据的增加与分页的实现
Dec 10 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
微信小程序实现随机验证码功能
Dec 20 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
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 spl_autoload_register实现自动加载研究
2011/12/06 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
python如何制作英文字典
2019/06/25 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
求高于平均分的学生学号及成绩
2016/09/01 面试题
Ajax的工作原理
2015/12/04 面试题
农业大学毕业生的个人自我评价
2013/10/11 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
活动总结书
2014/05/08 职场文书
公关活动策划方案
2014/05/25 职场文书
设计专业自荐信
2014/06/19 职场文书
个人委托书怎么写
2014/09/17 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
共青团员自我评价
2015/03/10 职场文书
汶川大地震感悟
2015/08/10 职场文书
python tkinter实现定时关机
2021/04/21 Python
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python