zoukankan      html  css  js  c++  java
  • 多个input连接在一起的时候如何实现输入一个数字跳入下一个

    这个是页面内容  ,我分了12格子,作为一个12位的会员卡号的输入;其实就是12个input我把他们放在了一个div里面  这样配上背景图,看着是一个大的输入框。

     1 <div id="AccountNumber" style="position: relative;top: 296px;left: 237px; 339px;height: 34px">
     2             <div style=" 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
     3                                                                             style="height: 100%; 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
     4             </div>
     5             <div style=" 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
     6                                                                             style="height: 100%; 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
     7             </div>
     8             <div style=" 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
     9                                                                             style="height: 100%; 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
    10             </div>
    11             <div style=" 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
    12                                                                             style="height: 100%; 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
    13             </div>
    14             <div style=" 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
    15                                                                             style="height: 100%; 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
    16             </div>
    17             <div style=" 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
    18                                                                             style="height: 100%; 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
    19             </div>
    20             <div style=" 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
    21                                                                             style="height: 100%; 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
    22             </div>
    23             <div style=" 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
    24                                                                             style="height: 100%; 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
    25             </div>
    26             <div style=" 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
    27                                                                             style="height: 100%; 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
    28             </div>
    29             <div style=" 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
    30                                                                             style="height: 100%; 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
    31             </div>
    32             <div style=" 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
    33                                                                             style="height: 100%; 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
    34             </div>
    35             <div style=" 8%;height: 28px;float:left;"><input maxlength="1" id="T"
    36                                                                    style="height: 100%; 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>
  • 相关阅读:
    阿里取消周报
    摇滚明星原则
    t
    B树、B+树索引算法原理(下)
    订单业务楼层化 view管理器和model管理器进行了model和view的全面封装处理 三端不得不在每个业务入口上线时约定好降级开关,于是代码中充满了各种各样的降级开关字段
    单元测试
    项目管理图 有任务分解、技术风险 风险预案
    CPU飙高,系统性能问题如何排查?

    如何让淘宝不卡顿? 读写比例 动态扩容 分布式化路线 mysql 优化
  • 原文地址:https://www.cnblogs.com/Viagra/p/5591570.html
Copyright © 2011-2022 走看看