多个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>