js文本框焦点自动聚焦到下个文本框
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文本框焦点自动聚焦到下个文本框的更多相关文章
- Js获取下拉框选定项的值和文本
Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...
- (三)在js(jquery)中获得文本框焦点和失去焦点的方法
在js(jquery)中获得文本框焦点和失去焦点的方法 文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...
- js获取select下拉框的value值和text文本值
介绍一种取下拉框值以及绑定下拉框数据的方法 这里用到的jquery-ui-multiselect插件 1.前台html代码 <span class="ModuleFormFiel ...
- js中点回车enter触发事件&layui弹窗按enter键不停弹窗问题的解决&js实现鼠标焦点自动落到文本框(layui)
js中回车触发事件 一. document.onkeydown = function (e) { // 回车提交表单 // 兼容FF和IE和Opera var theEvent = window.e ...
- [js开源组件开发]模拟下拉选项框select
模拟下拉选项框select 在css3流行的情况下,下拉框还是无法满足PD的需求,所以有了autosearch,有了模拟下拉框.效果如下图: select DEMO请案例点击这里查看.http://w ...
- 点击Enter键,文本框焦点改变 分类: WinForm 2014-04-15 10:30 223人阅读 评论(0) 收藏
一个例子: 一个简单的 登陆界面,有用户名.密码文本框.登陆按钮. 想要实现的效果是,用户输入用户名之后,点击Enter键进入到下一个文本框,同理,输入完密码之后,登陆按钮获得焦点,再次点击Ente ...
- js获取子节点和修改input的文本框内容
js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...
- js入门-文本框输入特定内容控制另一个文本框
在填写表单时,有时需要某些文本框隐藏,当一文本框输入特定内容时才会显示隐藏的文本框,这一功能可以用onchange事件或oninput事件实现.下面对比下两种方法实现的区别: onchange()定义 ...
- JS案例 - 可自动伸缩高度的textarea文本框
文本框的默认现象: textarea如果设置cols和rows来规定textarea的尺寸,那么textarea的默认宽高是这俩属性设置的值,可以通过鼠标拖拽缩放文本框的尺寸. textarea如果设 ...
随机推荐
- js 中常用的设计模式
常用的设计模式: 工厂方法模式.单例模式.适配器模式.组合模式.迭代子模式 (23种设计模式) 总体来说设计模式分为三大类: ①创建型模式 共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原 ...
- jpql简单l查询
JPQL全称Java Persistence Query Language package com.ytkj.entity; import javax.persistence.*; import ja ...
- .NET简介
| 版权声明:本文为博主原创文章,未经博主允许不得转载. 微软跨语言运行的主要机制就如上图类似,其最重要的部分是CLR和MSIL:其中MSIL是微软中间语言,它的主要的作用是将不同 的语言,如:C ...
- DDCTF 北京地铁
这周打了ddctf,被打成了dd 北京地铁题目给了一张北京地铁图,提示如下:Color Threshold 提示:AES ECB密钥为小写字母提示2:密钥不足位用\0补全提示3:不要光记得隐写不看图片 ...
- HTTP、HTTP1.0、HTTP1.1、HTTP2.0、HTTPS
一.HTTP HTTP(超文本传输协议,HyperText Transfer Protocol)是应用层的协议,目前在互联网中应用广泛. 它被设计用于Web浏览器和Web服务器之间的通信,但它也可 ...
- shell变量的间接引用
- teb教程7
融合自定义的障碍物 简介:本部分讲解怎样考虑其他节点发布的多边形的障碍物. 1.在一些应用当中,可能不想依赖于代价地图或者想添加其他的除了点状的障碍物.你可以发送你自己的障碍物列表到teb_local ...
- JSONObject.toJSONString(map)
Map<Integer, List<Integer>> map = new LinkedHashMap<>(); map.put(1,ddzCard.getOneS ...
- Codeforces 1163F 最短路 + 线段树 (删边最短路)
题意:给你一张无向图,有若干次操作,每次操作会修改一条边的边权,每次修改后输出1到n的最短路.修改相互独立. 思路:我们先以起点和终点为根,找出最短路径树,现在有两种情况: 1:修改的边不是1到n的最 ...
- 新手创建多module mvn工程
1.创建工程 创建一个mvn工程有两种方式,一种是通过命令创建,一种是通过idea去一步一步配置. 1.1 命令模式 mvn archetype:generate -DgroupId={groupId ...