多个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 ...
随机推荐
- Py4j-RPC
python 使用灵活.方便在科研中被广泛的使用,Numpy和SciPy等科学计算库使其拥有强大的计算方式.很多机器学习和深度学习的库也都采用了python,然而在大数据.后台开发中仍然较多的使用Ja ...
- caffe+CPU︱虚拟机+Ubuntu16.04+CPU+caffe安装笔记
由于本机是window10系统,所以想尝试caffe就在自己电脑上整了一个虚拟机(详情可见:win10系统搭建虚拟机:VMware Workstation Player 12环境+Ubuntu Kyl ...
- 利用 xrandr 命令修改屏幕分辨率
问题背景 电脑外接着一个 23' 的显示器,分辨率为 1920*1080. 操作系统:ubuntu 14.04 今天,通过 Setting->Displays 中选择外接屏的分辨率时,发现最大只 ...
- 【html5】html5学习笔记2--表单
html5 新增输入类型 html5新增了 email.number.Date pickers (date, month, week, time, datetime, datetime-local) ...
- freemarker中的split字符串分割
freemarker中的split字符串分割 1.简易说明 split分割:用来根据另外一个字符串的出现将原字符串分割成字符串序列 2.举例说明 <#--freemarker中的split字符串 ...
- Flex中单选按钮控制表格中的列的增加或减少
1.问题背景 单选按钮有"苹果"和"香蕉"两个,表格中的列有星期.苹果.香蕉和苹果比率,选择了"苹果"单选按钮,表格显示星期.苹果和苹果比率 ...
- C# 通过smtp服务器进行邮件发送 MailHelper
C# 通过smtp服务器进行邮件发送 MailHelper.cs using System; using System.Data; using System.Configuration; using ...
- Django学习-16-Session
1.保存在服务器的键值对 2.Session做验证时,还要依赖Cookie(重要).当用户登录成功时,生成随机字符串,一份放到Session,一份放到Cookie.当用户再次登录, ...
- 关于swiper的滚动条滑动
<div class="swiper-container2"> <div class="swiper-wrapper"> <div ...
- HttpServletResponse,HttpServletRequest详解
1.相关的接口 HttpServletRequest HttpServletRequest接口最常用的方法就是获得请求中的参数,这些参数一般是客户端表单中的数据.同时,HttpServletReq ...