多个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 ...
随机推荐
- MySQL基础学习笔记
一.数据库基本概念 1.1 数据库 - Database 从字面意思看,数据库就是一个存储数据的仓库.从计算机的角度来讲,数据库(Datebase)是按照数据结构来组织.存储和管理数据的仓库. 简单来 ...
- C#调用WebService时插入cookie
SOAPUI插入Cookie的方法 SOAP插入cookie的方法如下,点击Head,点击加号,然后直接设置就可以了. C#中调用webService时插入Cookie 由于调用的时候必须要带上coo ...
- U-boot-1.1.4中关于hello_world.srec出错
make[1]: *** No rule to make target `hello_world.srec', needed by `all'. Stop. make[1]: Leaving dir ...
- Sparklyr与Docker的推荐系统实战
作者:Harry Zhu 链接:https://zhuanlan.zhihu.com/p/21574497 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 相关内容: ...
- mysql常用基础操作语法（十一）~~字符串函数【命令行模式】
注:sql的移植性比较强,函数的移植性不强,一般为数据库软件特有,例如mysql有mysql的函数,oracle有oracle的函数. 1.concat连接字符串: 从上图中可以看出,直接使用sele ...
- 蜻蜓FM 涉嫌诈骗投资人和广告主源代码剖析
本文主要内容,引用自知乎的这篇文章:如何评价蜻蜓 FM 伪造用户活跃度等数据 感谢"左莫"."任正"等热心正义的网友--左莫,任正的最早的回答猜测已经被蜻蜓FM ...
- Linux显示一个二进制文件或可执行文件的完整路径
Linux显示一个二进制文件或可执行文件的完整路径 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ which halt /sbin/halt
- ONCOCNV软件思路分析之tumor处理
前期处理 perl脚本统计RC(RC(read counts)) 读入control baseline 和 sigma(最后baseline 预测的mad值) 将gc < 0.28或gc > ...
- Windows10 + Matlab2013 mex C++ 调用gsl
最前面啰嗦一句,matlab默认编译c的编译器有点奇怪,会出现引用.h却找不到相应函数的问题,解决方法是把.c全部都改成.cpp!血的教训! 下面进入正题~~ 由于Matlab调用的C函数中引用了GS ...
- PyTorch官方中文文档：torch.optim
torch.optim torch.optim是一个实现了各种优化算法的库.大部分常用的方法得到支持,并且接口具备足够的通用性,使得未来能够集成更加复杂的方法. 如何使用optimizer 为了使用t ...