利用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 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
vue 设置 input 为不可以编辑的实现方法
Sep 19 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
使用TS来编写express服务器的方法步骤
Oct 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
深入了解php4(1)--回到未来
2006/10/09 PHP
PHP多个版本的分析解释
2011/07/21 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
JQuery autocomplete 使用手册
2010/04/01 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
python语言使用技巧分享
2016/05/31 Python
python实现文本界面网络聊天室
2018/12/12 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
Python-opencv 双线性插值实例
2020/01/17 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
请解释在new与override的区别
2012/10/29 面试题
八一建军节感言
2014/02/28 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
铅球加油稿100字
2014/09/26 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
服务整改报告
2014/11/06 职场文书
师德标兵事迹材料
2014/12/19 职场文书
开学第一周值周总结
2015/07/16 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
php解析非标准json、非规范json的方式实例
2022/05/10 PHP