利用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 相关文章推荐
use jscript Create a SQL Server database
Jun 16 Javascript
JavaScript的变量作用域深入理解
Oct 25 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
JavaScript Date对象详解
Mar 01 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
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结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
Python 时间处理datetime实例
2008/09/06 Python
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
python 带时区的日期格式化操作
2020/10/23 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
文员个人的求职信范文
2013/09/26 职场文书
计算机专业大学生的自我评价
2013/11/14 职场文书
法制宣传实施方案
2014/03/13 职场文书
公司年终奖分配方案
2014/06/16 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
护理培训心得体会
2016/01/22 职场文书
python中的被动信息搜集
2021/04/29 Python
springboot用户数据修改的详细实现
2022/04/06 Java/Android