利用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字符串连接性能问题有争议
Jan 12 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
jquery 批量上传图片实现代码
2010/01/28 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Python合并字符串的3种方法
2015/05/21 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
Python变量类型知识点总结
2019/02/18 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
基于python3的socket聊天编程
2020/02/17 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
建筑工程技术应届生求职信
2013/11/17 职场文书
中国梦团日活动总结
2014/07/07 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
教师工作表现自我评价
2015/03/05 职场文书
公司禁烟通知
2015/04/23 职场文书
创业计划书之家教中心
2019/09/25 职场文书
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android