利用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 相关文章推荐
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
jquery构造器的实现代码小结
May 16 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
深入理解(function(){... })();
Aug 16 Javascript
js实现网页定位导航功能
Mar 07 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
原生js实现日历效果
Mar 02 Javascript
vue+echarts实现多条折线图
Mar 21 Vue.js
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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
用PHP函数解决SQL injection
2006/12/09 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
Python中map和列表推导效率比较实例分析
2015/06/17 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
python之mock模块基本使用方法详解
2019/06/27 Python
Python如何实现邮件功能
2020/05/27 Python
学习Python爬虫的几点建议
2020/08/05 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
正风肃纪剖析材料
2014/02/18 职场文书
出生证明公证书
2014/04/09 职场文书
美国留学经济担保书
2014/05/20 职场文书
就业推荐表导师评语
2014/12/31 职场文书
检讨书怎么写
2015/05/07 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
Python max函数中key的用法及原理解析
2021/06/26 Python