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 相关文章推荐
jQuery hover 延时器实现代码
Mar 12 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
深入研究React中setState源码
Nov 17 Javascript
js中如何完美的解析数据
Mar 18 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
vue实现计算器功能
Feb 22 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 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中的Cannot modify header information 问题
2013/08/12 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
dedecms中使用php语句指南
2014/11/13 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
Angularjs 基础入门
2014/12/26 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
python归并排序算法过程实例讲解
2020/11/04 Python
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
几道Java和数据库的面试题
2013/05/30 面试题
高中课程设置方案
2014/05/28 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
2015年招聘工作总结
2014/12/12 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
一个都不能少观后感
2015/06/04 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python