多个input连接在一起的时候如何实现输入一个数字跳入下一个
Posted 黑色白沙的园子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多个input连接在一起的时候如何实现输入一个数字跳入下一个相关的知识，希望对你有一定的参考价值。
这个是页面内容 ，我分了12格子，作为一个12位的会员卡号的输入;其实就是12个input我把他们放在了一个div里面 这样配上背景图，看着是一个大的输入框。
1 <div id="AccountNumber" style="position: relative;top: 296px;left: 237px;width: 339px;height: 34px"> 2 <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T" 3 style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF"> 4 </div> 5 <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T" 6 style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF"> 7 </div> 8 <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T" 9 style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF"> 10 </div> 11 <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T" 12 style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF"> 13 </div> 14 <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T" 15 style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF"> 16 </div> 17 <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T" 18 style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF"> 19 </div> 20 <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T" 21 style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF"> 22 </div> 23 <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T" 24 style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF"> 25 </div> 26 <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T" 27 style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF"> 28 </div> 29 <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T" 30 style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF"> 31 </div> 32 <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T" 33 style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF"> 34 </div> 35 <div style="width: 8%;height: 28px;float:left;"><input maxlength="1" id="T" 36 style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF"> 37 </div> 38 </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连接在一起的时候如何实现输入一个数字跳入下一个的主要内容，如果未能解决你的问题，请参考以下文章
如何通过js限制用户在input text中只能输入数字和"-"号?
C语言，如何将一个个输入的数字变成一串数字一起输出来，求解~