多个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 ...
随机推荐
- Redis笔记3-redis事务
Redis的事务机制允许同时执行多条指令,它是原子性操作,事务中的命令要么全部执行,要么全部不执行,另外,事务中的所有指令都会被序列化,而且其开始执行过程中,不回被即时过来的指令所打断,其需要经历三个 ...
- CentOS下iptables持久化
iptables规则持久化 设定防火墙规则 iptables -A INPUT -s 1.1.1.1/32 -p tcp -m tcp --dport 22 -j DROP iptables -A I ...
- HDP2.0测试
1.测试Hbase (1)hive导入hbase
- 借鉴mini2440的usb-wifi工具集在Beagleboard上移植无线网卡
配置minicom: sudo yum install minicom sudo minicom -s 选择Serial port setup,此时所示光标在"Change which se ...
- python函数式编程之装饰器(二)
以前用装饰器,都是定义好了装饰器后,使用@装饰器名的方法写入被装饰函数的正上方 在这里,定义的装饰器都是没有参数的 在定义装饰器的函数的时候,没有在括号里定义参数,这就叫做无参装饰器 既然有无参装饰器 ...
- 利用Windows性能计数器(PerformanceCounter)监控
一.概述 性能监视,是Windows NT提供的一种系统功能.Windows NT一直以来总是集成了性能监视工具,它提供有关操作系统当前运行状况的信息,针对各种对象提供了数百个性能计数器.性能对象,就 ...
- Tomcat中的Context.xml的<Loader delegate="true"/>
Tomcat中的Context.xml的<Loader delegate="true"/> 1.<Loader delegate="true" ...
- Python实现常用的数据结构
Python中的数据结构 #巧用Python列表特性实现特定数据结构 #栈实现stack = []stack.push(x)stack.pop()stack[-1] #队列实现from colle ...
- PyTorch官方中文文档：PyTorch中文文档
PyTorch中文文档 PyTorch是使用GPU和CPU优化的深度学习张量库. 说明 自动求导机制 CUDA语义 扩展PyTorch 多进程最佳实践 序列化语义 Package参考 torch to ...
- R语言-来自拍拍贷的数据探索
案例分析:拍拍贷是中国的一家在线借贷平台,网站撮合了一些有闲钱的人和一些急用钱的人.用户若有贷款需求,可在网站上选择借款金额. 本项目拟通过该数据集的探索,结合自己的理解进行分析,最终目的的是初步预测 ...