利用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数组插入一条记录的代码
Aug 30 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
简单的分页代码js实现
May 17 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
axios post提交formdata的实例
Mar 16 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 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的开合式多级菜单程序
2006/10/09 PHP
php UTF8 文件的签名问题
2009/10/30 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
对python中的logger模块全面讲解
2018/04/28 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python路径的写法及目录的获取方式
2019/12/26 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
Java的类与C++的类有什么不同
2014/01/18 面试题
火箭队口号
2014/06/18 职场文书
求职信的正确写法
2014/07/10 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
质量保证书格式模板
2015/02/27 职场文书
综治目标管理责任书
2015/05/11 职场文书
Python torch.flatten()函数案例详解
2021/08/30 Python
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS