多个input连接在一起的时候如何实现输入一个数字跳入下一个
这个是页面内容 ，我分了12格子，作为一个12位的会员卡号的输入;其实就是12个input我把他们放在了一个div里面 这样配上背景图，看着是一个大的输入框。
<div id="AccountNumber" style="position: relative;top: 296px;left: 237px;width: 339px;height: 34px">
<div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
</div>
<div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
</div>
<div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
</div>
<div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
</div>
<div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
</div>
<div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
</div>
<div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
</div>
<div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
</div>
<div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
</div>
<div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
</div>
<div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
</div>
<div style="width: 8%;height: 28px;float:left;"><input maxlength="1" id="T"
style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
</div>
</div>
然后就是JS的书写了，请一定要注意，这个<script>是要放到body外面，<html>里面的。。切记，要不然会不工作。。。
<!--AccountNumber输入-->
<script>
onload = function () { var txts = document.getElementById("AccountNumber").getElementsByTagName("input");
for (var i = 0; i < txts.length; i++) { var t = txts[i];
t.index = i;
t.setAttribute("readonly", true);
t.onkeyup = function () { if (event.keyCode == 8) {
this.value = "";
var behand = this.index - 1;
if (behand < 0) return;
txts[behand].removeAttribute("readonly");
txts[behand].focus(); } else {
this.value = this.value.replace(/^(.).*$/, '$1');
var next = this.index + 1;
if (next > txts.length - 1) return;
txts[next].removeAttribute("readonly");
txts[next].focus();
} }
}
txts[0].removeAttribute("readonly");
}
</script>
多个input连接在一起的时候如何实现输入一个数字跳入下一个的更多相关文章
- input text输完自动跳到下一个
应用场景: 短信验证码输入 效果: input输入框,输入完以后自动跳转到下一个 思路: 四个输入框 进入聚焦到第一个输入框 第一个输入框输完一个字符后自动聚焦到下一个输入框 1.四个输入框 < ...
- js input框输入1位数字后自动跳到下一个input框聚焦
// input框输入1位数字后自动跳到下一个input聚焦 function goNextInput(el){ var txts = document.querySelectorAll(el); f ...
- [转]SecureCRT连接主机时，无法从键盘输入
问题: SecureCRT连接主机时,无法从键盘输入 答案: 最近通过超级终端或者SecureCRT连接主机时,都只能读取设备信息,但是无法从键盘输入,进入不了配置状态,后来仔细检查了配置,居然是流控 ...
- Jquery 实现input回车时跳转到下一个input元素
/** * 回车时跳转到下一个元素 * @Author HTL * @DateTime 2016-12-30T11:33:25+0800 * @param {[type]} $input [INP ...
- html input 文本框的一些操作（限制输入...）
1.取消按钮按下时的虚线框 在input里添加属性值 hideFocus 或者 HideFocus=true 2.只读文本框内容 在input里添加属性值 readonly 3.防止退后清空的TEXT ...
- 在HTML中限制input 输入框只能输入纯数字
限制 input 输入框只能输入纯数字 onkeyup = "value=value.replace(/[^\d]/g,'')" 使用 onkeyup 事件,有 bug ,那就是在 ...
- input验证码框，输入非数字或非12位时，红框提示;每4位加一个空格
以下代码:input验证码框,输入非数字或非12位时,红框提示;每4位加一个空格 //input验证码框,输入非数字或非12位时,红框提示;每3位加一个空格 $(".text"). ...
- 解决Chrome浏览器自动记录用户名和密码的黄色背景问题和该解决方法与tab切换至下一个input冲突的问题。
哈哈哈,是不是标题很长呀,不逗你们了.其实这么长的标题主要就说了两件事: 第一件:解决Chrome浏览器自动记录用户名和密码的黄色背景问题. 第二件:输入完用户名后按下tab键切换至下一个输入密码in ...
- input属性设置type="number"之后, 仍可输入e, E, -, + 的解决办法
<el-input v-model="scope.row.variables.leaderbuweiscores.score" @keyup.native="cha ...
随机推荐
- 用户态Linux内核
User Mode Linux 是可以在用户态启动的 Linux版本,最新版linux内核已提供了支持.这使我们能在类似 OpenVZ 虚拟化技术的系统上,使用最新的 Linux 内核:并且可以在非 ...
- Centos中hive/hbase/hadoop/mysql实际操作及问题总结
目录 Hive中文乱码问题 hive和hbase的版本不一致 Ambari hive插入Hbase出错 Hive0.12和Hbase0.96不兼容,重新编译hive0.12.0 hiveserver不 ...
- qwe框架- CNN 实现
CNN实现 概述 我在qwe中有两种,第一种是按照Ng课程中的写法,多层循环嵌套得到每次的"小方格",然后WX+b,这样的做法是最简单,直观.但是效率极其慢.基本跑个10张以内图片 ...
- 制作U盘启动CDLinux
用U盘启动CDLinux的好处就此不必多说了,直接上料: 下载必需文件: 1,CDLinuxU盘启动制作工具:CDLinuxU盘启动制作工具 2,CDlinux 0.9.7 集_奶瓶_打气筒_mini ...
- HTML多表头表格
1.多表头表格代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- Java获取当前的年月
今天,我在尝试从数据库取数据的过程中,发现页面初始化时需要给时间控件赋初值.于是,我就写了一个获取当前年月的时间工具类. 1.具体源码如下: YearAndMonth.java: /** * @Tit ...
- SecurityError:Error:#2148
1.错误描述 SecurityError:Error:#2148:SWF文件http://localhost:8888/UploadDownload/Flash/ReadLocalFile.swf/[ ...
- OpenStack_I版 3.glance部署
存储镜像path 默认镜像不存储在本地,一般放在swift对象存储或Cinder块存储里 glance安装 拷贝配置文件到/ect下,并新建配置目录,日志目 ...
- freemarker处理map的数据（二十）
1.简易说明 (1)map取值 (2)key取值 2.实现示例 <html> <head> <meta http-equiv="content-type&quo ...
- 【USACO4.2】草地排水Drainage Ditches（最大流）
题目背景 在农夫约翰的农场上,每逢下雨,贝茜最喜欢的三叶草地就积聚了一潭水.这意味着草地被水淹没了,并且小草要继续生长还要花相当长一段时间.因此,农夫约翰修建了一套排水系统来使贝茜的草地免除被大水淹没 ...