欢迎使用CSDN-markdown编辑器
来源:互联网 发布:福岛 知乎 编辑:程序博客网 时间:2024/06/10 20:38
js获取inpu焦点,输入完1位数字后自动跳到第二个光标
html代码块
<div class="mui-row" id="inputs"> <input class="mui-numbox-input" type="number" onKeyUp="if(this.value.length>1){this.value=this.value.substr(0,1)};this.value=this.value.replace(/[^\d]/g,'');"/> <input class="mui-numbox-input" type="number" onKeyUp="if(this.value.length>1){this.value=this.value.substr(0,1)};this.value=this.value.replace(/[^\d]/g,'');"/> <input class="mui-numbox-input" type="number" onKeyUp="if(this.value.length>1){this.value=this.value.substr(0,1)};this.value=this.value.replace(/[^\d]/g,'');"/> <input class="mui-numbox-input" type="number" onKeyUp="if(this.value.length>1){this.value=this.value.substr(0,1)};this.value=this.value.replace(/[^\d]/g,'');"/> <input class="mui-numbox-input" type="number" onKeyUp="if(this.value.length>1){this.value=this.value.substr(0,1)};this.value=this.value.replace(/[^\d]/g,'');"/> <input class="mui-numbox-input" type="number" onKeyUp="if(this.value.length>1){this.value=this.value.substr(0,1)};this.value=this.value.replace(/[^\d]/g,'');"/></div>
css
#inputs{ overflow:hidden;}#inputs input{ width:14%; float:left; padding:10px 13px; text-align: center; border: 1px solid #fe8c10; color: #fe8c10; margin:0 1%;}
js代码
光标自动跳到下一个input onload = function(){ var inputs=document.getElementById('inputs'); var txts = inputs.getElementsByTagName("input"); for(var i = 0; i<txts.length;i++){ var t = txts[i]; t.index = i; t.setAttribute("readonly", true); t.onkeyup=function(){ 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"); }
0 0
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- [P2472]蜥蜴
- LeetCode 3. Longest Substring Without Repeating Characters 滑动窗口
- 离开工具自己手写一个servlet
- 深入理解java异常处理机制
- 聚类系列-Affinity Propagation
- 欢迎使用CSDN-markdown编辑器
- 并查集详解 (转)
- 网络性能测试工具iperf详细使用图文教程
- 实验5-运用数组拆分奇偶数
- c++上机实验报告6:矩阵求和
- 2 块存储、文件存储、对象存储这三者的本质差别是什么?
- 解决返回json数据,属性值为null或空被省略的问题。
- java中的回调函数
- swift 基础知识