多个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 ...
随机推荐
- Hibernate5环境搭建
1.导包 Hibernate开发包 数据库的驱动包 2.核心配置文件 核心配置文件(赋值到src下) 1.核心配置文件 对于hibernate的核心配置文件它有两种方式(选其中一种即可 ...
- CentOS6实现路由器功能
网络之间的通信主要是依靠路由器,当然生成环境中是拥有路由器的,但是系统中的路由配置也是需要了解一下地,今天讲解一下在CentOS6环境下搭建路由器,此乃入门级的简单实验.拓扑如上图已经规划好,暂且使用 ...
- linux 运维，代理，acl控制访问
运维概述:运行 & 维护,Operation & MaintanceIT运维.业务运维.日常管理运维采用相关的方法.手段.技术.制度.流程和文档等,对IT运行环境.IT业务系统和IT运 ...
- dm642的中断定时器
TIMER_Handle TimerHandle0; void timer1() { ////////////定时器/////////////////////// TimerHandle0 = TI ...
- java程序调用xfire发布的webService服务
昨天用xfire搭好了一个简单的webService的服务,可以在浏览器访问,今天便想要尝试以下如何调用这个服务及相关的方法.在网上查找了一些资料后,实现过程如下. 1.创建一个maven web项目 ...
- dojo级联步骤
dojo级联步骤 1.数据请求回来后,检查数据格式是否满足下拉框的数据格式: 2.通过firebug进行调试,检查select下拉框子项结点是否取道: 3.查看API文档,保证改变store的方法是正 ...
- R语言︱异常值检验、离群点分析、异常值处理
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 笔者寄语:异常值处理一般分为以下几个步骤:异常 ...
- HighCharts之气泡图
HighCharts之气泡图 1.HighCharts之气泡图源码 bubble.html: <!DOCTYPE html> <html> <head> <m ...
- No bean named 'cxf' is defined
1.错误描述 严重:Exception starting filter CXFServlet org.springframework.beans.factory.NoSuchBeanD ...
- 芝麻HTTP：Scrapyd的安装
Scrapyd是一个用于部署和运行Scrapy项目的工具,有了它,你可以将写好的Scrapy项目上传到云主机并通过API来控制它的运行. 既然是Scrapy项目部署,基本上都使用Linux主机,所以本 ...