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 相关文章推荐
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
图片上传插件jquery.uploadify详解
Nov 15 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
requirejs + vue 项目搭建详解
Jun 16 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 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几个数学计算的内部函数学习整理
2011/08/06 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
再谈JavaScript线程
2015/07/10 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
JavaScript实现区块链
2018/03/14 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
Python列表切片操作实例总结
2019/02/19 Python
python实现Virginia无密钥解密
2019/03/20 Python
使用python绘制温度变化雷达图
2019/10/18 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
求职信模版
2013/11/30 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
副处级干部考察材料
2014/05/17 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
软件测试专业推荐信
2014/09/18 职场文书
2014年终个人工作总结
2014/11/07 职场文书
具结保证书
2015/01/17 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android