利用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 相关文章推荐
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
Vue实现简易计算器
Feb 25 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
Vue性能优化的方法
Jul 30 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编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
python搜索指定目录的方法
2015/04/29 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
运动会表扬稿大全
2014/01/16 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
保护环境建议书300字
2014/05/13 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
2014年科研工作总结
2014/12/03 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
植树节新闻稿
2015/07/17 职场文书
小学入学感言
2015/08/01 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS