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

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-input-cha-focus-style-codes/

具体代码如下：

<!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程序设计有所帮助。

赞 (0)

相关推荐

  • JavaScript仿微博输入框效果(案例分析)

    JavaScript仿微博输入框效果(案例分析)

    这篇文章给大家分享一个小的JavaScript的案例,就是模仿微博输入框的效果. 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿微博输入框效果</title> <script src="jquery.js"></script> </h

  • jquery实现微博文字输入框 输入时显示输入字数 效果实现

    jquery实现微博文字输入框 输入时显示输入字数 效果实现

    效果如下: 代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>.taDetail{height: 50px; width:350px; text-align:left;

  • JavaScript仿支付宝密码输入框

    JavaScript仿支付宝密码输入框

    现在很多时候大家付款的场景都是在手机上面,而随着H5页面的开发变得越来越方便,很多场景也从客户端搬到了浏览器中,其中支付这个场景就很自然的被放在了浏览器中.那么这样的输入框大家一定不会陌生吧: 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签. 并且给这个5个input设置display: inline-block 属性,同时用<!- ->来消除元素直接的margin

  • JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金) 两位小数

    第一: 限制只能是整数 <input type = "text" name= "number" id = 'number' onkeyup= "if(! /^d+$/.test(this.value)){alert('只能整数');this.value='';}" /> 如果不是整数就直接alert 第二: 限制是两位的小数 <input type = "text" name= "price&quo

  • js格式化输入框内金额、银行卡号

    js格式化输入框内金额、银行卡号

    我们在项目中经常遇到需要格式化的金额数和银行卡号,一般我们常见的有两种表现形式:输入框内格式化和输入框外格式化.这里我主要把我在项目中遇到的输入框内部格式化的,代码亮出来,框外的格式化相对简单一点. 页面代码: <div class="wrap"> <input type="text" id="bankCard" placeholder="输入银行卡号"> </div> <div cl

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

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

    本文实例讲述了JS实现方向键切换输入框焦点的方法.分享给大家供大家参考.具体如下: 这里实现js方向键控制切换输入框焦点效果,不过无法兼容Firefox.当输入完毕按回车或按方向键可移动焦点至想要输入的文本框内,无需点击鼠标,对于经常录入数据的时候,这种功能可提高输入速度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-input-cha-focus-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • js图片模糊切换显示特效的方法

    本文实例讲述了js图片模糊切换显示特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>一款图片模糊切换显示效果</title> <body> <script language="JavaScript1.1"> <!-- var slidespeed=3000 var slideimages=new Array("/images/m01.jpg",&q

  • Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法

    做项目时,客户要求能够用enter回车直接切换输入(焦点),当最后一个时候,直接提交信息. 第一想法就是,网上去copy一段代码直接用.但了百度.谷歌找了个遍,找到的代码80%以上都是一样的.有的代码太老,都不能用.有的只有部分浏览器能用.折腾了半小时也没个合适的办法.最后一想,干脆自己动手. 一.思路 每次点击回车的时候,获取当前的焦点位置,然后设置它的下一个元素获取焦点; 二.代码 <script type="text/javascript"> $('input:tex

  • JS+CSS实现淡入式焦点图片幻灯切换效果的方法

    本文实例讲述了JS+CSS实现淡入式焦点图片幻灯切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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

  • js实现非常简单的焦点图切换特效实例

    本文实例讲述了js实现非常简单的焦点图切换特效的方法.分享给大家供大家参考.具体分析如下: 这是一个非常非常简单的焦点图(更像滑动门),可供初学者借鉴参考 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w

  • JS使用正则表达式判断输入框失去焦点事件

    效果图 项目的正则表达式规则 1:用户名: 大写字母开头 6-20位字符(不允许有符号但是允许有_) 2:密码 大写开头 数字字母符号混合 8-15位 3:确认密码 大写开头 数字字母符号混合 8-15位 4:邮箱 邮箱格式 5:手机号 手机号格式 6:身份证号 身份证号格式 7:地址 中文开头 数字 - 字母 中文混合 项目目录 html代码 由于无法上传bootstrap.min.css 需要样式的需要前往官网下载 bootstrap中文网 <!DOCTYPE html> <html

  • zepto.js 实时监听输入框的方法

    如下所示: $('#phone').on('input', function(e) { //实时监听手机号码输入框变化 if($('#phone').val()) { //输入框内容不为空 }else{ //输入框内容为空 } }) change事件是在失去焦点的时候生效的.使用input可以很简单的实现输入框的实时监听 以上这篇zepto.js 实时监听输入框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vue中实现回车键切换焦点的方法

    几乎在所有浏览器中,都具有 Tab 键切换焦点的功能. 但是任性的用户强烈要求一定要有 Enter 键切换焦点的功能. 为了交付上线拿到钱,我们只好再一次毫无原则性的接受了客户的需求. 在上一代人中,大多都有这种操作习惯.习惯把保存成为编辑,习惯用回车替换 Tab.这是受到微软 excel 荼毒的结果. 起初我以为这个功能很简单,无非就是把 Enter 键的功能转接到 Tab 键上面,分分钟就可以解决掉的问题. 可困难马上就出现了,我发现这条路是走不通的. 我们经常可以主动触发某个事件,比如 e

  • js简单实现表单中点击按钮动态增加输入框数量的方法

    js简单实现表单中点击按钮动态增加输入框数量的方法

    本文实例讲述了js简单实现表单中点击按钮动态增加输入框数量的方法.分享给大家供大家参考.具体如下: 这里演示表单中点击按钮动态增加输入框数量的方法,默认是没有输入框,点击按钮之后,输入框会不断的增加,每点击一次,增加一个,觉得挺不错吧,希望对你有所帮助. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-input-button-add-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

  • JS实现点击循环切换显示内容的方法

    JS实现点击循环切换显示内容的方法

    本文实例讲述了JS实现点击循环切换显示内容的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 点击循环切换内容</title> <style> a { cursor: pointer; colo

随机推荐