HTML:

<form>
  <input type="text" name="text1" maxlength="3" size="3"/>-
  <input type="text" name="text2" maxlength="3" size="3"/>-
  <input type="text" name="text3" maxlength="3" size="3"/>
</form>

js:

function tabForward() {
if(this.value.length == this.getAttribute('maxlength')) {
for(let i = 0;i < this.form.elements.length;i ++) {
if(this == this.form.elements[i]) {
if(this.form.elements[i + 1]) {
this.form.elements[i + 1].focus();
return;
}
}
}
}
}
var form = document.forms[0];
var text1 = form.elements['text1'];
var text2 = form.elements['text2'];
var text3 = form.elements['text3'];
text1.addEventListener('keyup', tabForward, false);
text2.addEventListener('keyup', tabForward, false);
text3.addEventListener('keyup', tabForward, false);

  

js文本框焦点自动聚焦到下个文本框的更多相关文章

  1. Js获取下拉框选定项的值和文本

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...

  2. (三)在js(jquery)中获得文本框焦点和失去焦点的方法

    在js(jquery)中获得文本框焦点和失去焦点的方法   文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...

  3. js获取select下拉框的value值和text文本值

    介绍一种取下拉框值以及绑定下拉框数据的方法    这里用到的jquery-ui-multiselect插件 1.前台html代码 <span class="ModuleFormFiel ...

  4. js中点回车enter触发事件&layui弹窗按enter键不停弹窗问题的解决&js实现鼠标焦点自动落到文本框(layui)

     js中回车触发事件 一. document.onkeydown = function (e) { // 回车提交表单 // 兼容FF和IE和Opera var theEvent = window.e ...

  5. [js开源组件开发]模拟下拉选项框select

    模拟下拉选项框select 在css3流行的情况下,下拉框还是无法满足PD的需求,所以有了autosearch,有了模拟下拉框.效果如下图: select DEMO请案例点击这里查看.http://w ...

  6. 点击Enter键,文本框焦点改变 分类: WinForm 2014-04-15 10:30 223人阅读 评论(0) 收藏

    一个例子: 一个简单的 登陆界面,有用户名.密码文本框.登陆按钮.  想要实现的效果是,用户输入用户名之后,点击Enter键进入到下一个文本框,同理,输入完密码之后,登陆按钮获得焦点,再次点击Ente ...

  7. js获取子节点和修改input的文本框内容

    js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...

  8. js入门-文本框输入特定内容控制另一个文本框

    在填写表单时,有时需要某些文本框隐藏,当一文本框输入特定内容时才会显示隐藏的文本框,这一功能可以用onchange事件或oninput事件实现.下面对比下两种方法实现的区别: onchange()定义 ...

  9. JS案例 - 可自动伸缩高度的textarea文本框

    文本框的默认现象: textarea如果设置cols和rows来规定textarea的尺寸,那么textarea的默认宽高是这俩属性设置的值,可以通过鼠标拖拽缩放文本框的尺寸. textarea如果设 ...

随机推荐

  1. libVEX学习

    VEX IR是一种更加接近于compiler使用的中间语言/中间表示,它是不依赖于特定体系架构的. 1. Code Blocks code blocks是VEX处理代码的一个单元,使用IRSB结构体表 ...

  2. PAT_A1131#Subway Map

    Source: PAT A1131 Subway Map (30 分) Description: In the big cities, the subway systems always look s ...

  3. C++基础知识随记

    一.什么情况必须使用初始化列表的方式声明构造函数? 1.包含常量类型的成员 2.包含引用类型的成员 3.包含没有默认构造函数的类类型成员 4.优点:对于包含有类类型成员的类来说,省去了调用一次默认构造 ...

  4. 使用 C++ 编写的基础 Windows 服务 (CppWindowsService)

    最近项目中涉及到使用C++写一个后台服务程序,找了很多资料,还是使用Google搜索找到了比较详细点的资料,就是从微软官方MSDN的例子,如下: 使用 C++ 编写的基础 Windows 服务 (Cp ...

  5. [Java Performance] 线程及同步的性能之线程池/ThreadPoolExecutors/ForkJoinPool

    线程池和ThreadPoolExecutors   虽然在程序中可以直接使用Thread类型来进行线程操作,但是更多的情况是使用线程池,尤其是在Java EE应用服务器中,一般会使用若干个线程池来处理 ...

  6. __init__ 和__new__的区别

    __init__和__new__的区别 __init__是当实例对象创建完成后被调用的,然后设置对象属性的一些初始值. __new__是在实例创建之前被调用的,因为它的任务就是创建实例然后返回该实例, ...

  7. XStream的简单使用

    XStream XStream是一个java对象和xml相互转换的工具 创建XStream对象:XStream stream = new XStream() Java对象转换成xml:stream . ...

  8. Linux解压rar文件

    Linux解压rar文件(unrar安装和使用,分卷解压) windows平台很多压缩文档为rar文件,那么怎么做到Linux解压rar文件(unrar安装和使用)? 简单,centos5安装unra ...

  9. Spring的PropertyPlaceholderConfigurer应用(转)

    转自:http://www.cnblogs.com/yl2755/archive/2012/05/06/2486752.html Spring 利用PropertyPlaceholderConfigu ...

  10. koa2 的处理请求体koa-bodyparser koa-router 的中间件的学习

    1.官网 https://www.npmjs.com/package/koa-router https://www.npmjs.com/package/koa-bodyparser 2. demo / ...