随笔 - 54, 文章 - 1, 评论 - 4, 阅读 - 11万

先展示效果:

代码实现:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <title></title>
         <style type="text/css" >
            *{margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}   
            *{tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:rgba(0,0,0,0);}
            
            .password{
                width: 80%;
                height:40px;
                margin: 50px auto;
                position: relative;
                text-align: center;
                overflow: hidden;
            }
            .password .password_bg{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            .password .password_bg span{
                float: left;
                margin-right: 3%;
                width: 14%;
                height: 100%;
                line-height: 40px;
                height: 40px;
                font-size: 100px;
                background-color: #f1f1f1;
            }
            .password .password_bg span:last-child{margin: 0;}
            
            .password input{
                position: absolute;
                left: -100%;
                top: 0;
                -webkit-appearance: none;
                appearance: none;
                width: 200%;
                height: 100%;
                opacity: 0;
            }
            p{text-align: center;}
         </style>
    </head>
    <body>

        <div class="password">
            <div class="password_bg" id="showPasswd">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <input type="tel" id="passwd" maxlength="6">
        </div>


       <p>提交</p>

    </body>
</html>

<script>

var aSpan = QueryAll("#showPasswd span");
Query("#passwd").addEventListener("input",function(){
   var len = this.value.length;
  for (var i = 0; i< aSpan.length; i++){
         if(len > 0){
              aSpan[i].innerHTML = "·";
              len--;
          }else{
              aSpan[i].innerHTML = "";;
          }
  };
},false);



Query("p").onclick = function (){
    alert(Query("#passwd").value ) ;
}

function Query(e){return document.querySelector(e);}
function QueryAll(e){return document.querySelectorAll(e);}

</script>