JS实现方向键切换输入框焦点的方法


Posted in Javascript onAugust 19, 2015

本文实例讲述了JS实现方向键切换输入框焦点的方法。分享给大家供大家参考。具体如下:

这里实现js方向键控制切换输入框焦点效果,不过无法兼容Firefox。当输入完毕按回车或按方向键可移动焦点至想要输入的文本框内,无需点击鼠标,对于经常录入数据的时候,这种功能可提高输入速度。

运行效果截图如下:

JS实现方向键切换输入框焦点的方法

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS方向键切换输入框焦点</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table border="1" id="mm" onkeydown="keyDown(event)"> 
<tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr> 
<tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr> 
<tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr> 
<tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr> 
<tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr> 
</table> 
<script language="javascript" type="text/javascript"> 
<!-- 
var inputs=document.getElementById("mm").getElementsByTagName("INPUT"); 
function keyDown(event) 
{ 
 var focus=document.activeElement; 
 if(!document.getElementById("mm").contains(focus)) return; 
 var event=window.event||event;
 var key=event.keyCode; 
 for(var i=0; i<inputs.length; i++) 
 { 
  if(inputs[i]===focus) break; 
 } 
 switch(key) 
 { 
  case 37: 
   if(i>0) inputs[i-1].focus(); 
   break; 
  case 38: 
   if(i-4>=0) inputs[i-4].focus(); 
   break; 
  case 39: 
   if(i<inputs.length-1) inputs[i+1].focus(); 
   break; 
  case 40: 
   if(i+4 <inputs.length) inputs[i+4].focus(); 
   break; 
 } 
} 
//--> 
</script> 
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
javascript常用方法总结
May 14 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
基于node.js之调试器详解
Aug 22 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
详解RequireJs官方使用教程
Oct 31 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 #Javascript
js实现input框文字动态变换显示效果
Aug 19 #Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 #Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 #Javascript
easyui Droppable组件实现放置特效
Aug 19 #Javascript
js实现简单的联动菜单效果
Aug 19 #Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 #Javascript
You might like
php生成PDF格式文件并且加密
2015/06/22 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
php无限级分类实现方法分析
2016/10/19 PHP
php实现微信扫码支付
2017/03/26 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
python中使用正则表达式的连接符示例代码
2017/10/10 Python
提升Python程序性能的7个习惯
2019/04/14 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
师范大学音乐表演专业求职信
2013/10/23 职场文书
白酒市场营销方案
2014/02/25 职场文书
生日寄语大全
2014/04/08 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
公司给客户的感谢信
2015/01/23 职场文书
同事欢送会致辞
2015/07/31 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
Spring实现内置监听器
2021/07/09 Java/Android
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
pandas中pd.groupby()的用法详解
2022/06/16 Python