Html
    Css
    Js

    
                        
* {
        padding: 0px;
        margin: 0px;
    } 
    .pwd-box{  
        width:310px;
        height: 48px;
        position: relative;  
        border: 1px solid #9f9fa0;  
        border-radius: 3px;  
        overflow:hidden;
        margin: 10px auto;
    }  
    .pwd-box input[type="number"]{  
        width: 100%;  
        height: 100%;  
        /*color: transparent;  */
        /*letter-spacing 属性增加或减少字符间的空白*/
        /*letter-spacing: 35px;*/
        position: absolute;  
        top: 0;  
        left: 0;  
        border: none;  
        font-size: 18px;  
        opacity: 0;  
        z-index: 1;       
        outline: none;
    }
    .fake-box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: row;
    }
    .fake-box input{
        flex: 1;
        width: 100%;  
        height: 100%;  
        border: none;  
        border-right: 1px solid #e5e5e5;  
        text-align: center;  
        font-size: 30px;
        float: left;  
    }  
    .fake-box input:nth-last-child(1){  
        border:none;  
    } 

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.9.1
 立即下载

模仿手机端密码输入

原理:

一个真正的可以输入的input框,opacity: 0,设定位层级;(视图不可见的,可以获取数据的)

再来6(n)个input,readyonly,用来显示,type为password,设置好样式;(视图可见的)

3
      ωǒ?找人莪dě卷帜0
      2017/5/23 16:09:53
      存在bug当密码输入超过6个的时候还可以继续输入多个数字,虽然看不到
          梦幻飞雪0
          2017/11/9 10:07:23
          嗯嗯,因为input为number时设置maxlength属性无效,可以把input的属性number改为tel,就能达到相同的效果了,
          梦幻飞雪1
          2017/12/15 14:10:35

          最好在后面加一个判断 :

          if (pwd.length > 6) {
              pwd = pwd.substr(0, 6);
              $(this).val(pwd);
              pwd.length = 6;
          }
      回复