多个input连接在一起的时候如何实现输入一个数字跳入下一个-CSDN博客

这个是页面内容，我分了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>