zoukankan      html  css  js  c++  java
  • 模拟支付宝密码输入功能,ios上光标隐藏(网上找的在ios上光标还是会显示,进行了改进)

    <div class="pwd-box">  
                <input type="tel" maxlength="6" class="pwd-input" id="pwd-input">  
                <div class="fake-box">  
                    <input type="number" readonly="">  
                    <input type="number" readonly="">  
                    <input type="number" readonly="">  
                    <input type="number" readonly="">  
                    <input type="number" readonly="">  
                    <input type="number" readonly="">  
                </div>  
            </div>

    css样式

    .pwd-box{
        width:100%;
        padding-left: 1px;
        position: relative;
        border: 1px solid #9f9fa0;
        border-radius: 3px;
        over-flow:hidden
    }
    .pwd-box input[type="tel"]{
        width: 135%;/*让主要的输入框input宽度宽于显示密码的div*/
        height: 55px;
        color: transparent;
        position: absolute;
        top: 0;
        left: 0;
        border: none;
        font-size: 18px;
        opacity: 0;
        z-index: 1;
        letter-spacing: 35px;
        text-indent: -999em; /*文本向左缩进,不让光标出现在视野内*/
        opacity: 0;
        margin-left: -100px;/*让input向左移动100px,只要移出屏幕外就行,让光标不出现*/
    }
    .fake-box input{
        width: 15.3%;
        height: 48px;
        border: none;
        border-right: 1px solid #e5e5e5;
        text-align: center;
        font-size: 30px;
        display: inline-block;
        padding: 0;
        margin: 0;
        background: #fff;
    }
    .fake-box input:nth-last-child(1){
        border:none;
    }

    js代码

        <script type="text/javascript">
            function myFunction(){
                console.log('此功能点击时让光标至内容的最后,好让删除时 从最后一位数字删除')
                var t=$("#pwd-input").val();
                $("#pwd-input").val("").focus().val(t);
            }
        </script>
    <script type="text/javascript">
            var $input = $(".fake-box input");  
                $("#pwd-input").on("input", function() {  
                    var pwd = $(this).val().trim();  
    
                        var reg=new RegExp(/^[0-9]*$/);
                            if(!(reg.test(pwd))){
                                return false;
                            }
                                    console.log('pwd',pwd)
                    for (var i = 0, len = pwd.length; i < len; i++) {  
                        $input.eq("" + i + "").val(pwd[i]);  
                    }  
                    $input.each(function() {  
                        var index = $(this).index();  
                        if (index >= len) {  
                            $(this).val("");  
                        }  
                    });  
                    if (len == 6) {  
                    }  
                }); 
                </script>
  • 相关阅读:
    Python入门系列——第20篇
    Python入门系列——第19篇
    windows下python使用pip命令安装builtwith库时,遇到的utf-8问题的解决
    Python入门系列——第18篇
    在相同的主机上创建一个duplicate数据库
    duplicate database的时候,rman连接 auxiliary database的后状态不正确
    使用duplicate target database ... from active database复制数据库
    RHEL7
    Oracle 监听器日志文件过大导致监听异常
    TNS-01251: Cannot set trace/log directory under ADR
  • 原文地址:https://www.cnblogs.com/sjw-dmwz/p/9020161.html
Copyright © 2011-2022 走看看