样式应该怎么布局，或者js怎么在移动端实现

Question

Answer 1

短横线用span标签加下划线，让一个input标签透明（opacity = 0），并且监听oninput事件，根据输入字符串长度给span标签添加class，让它的：before变成黑色圆球

Answer 2

用6个input，监听输入一个之后下一个获取焦点

<style>
    #psw input {margin-right:10px;border:0 none;border-bottom:1px solid #ccc;text-align:center;}
</style>
<div id="psw">
    <input type="password" />
    <input type="password" />
    <input type="password" />
    <input type="password" />
    <input type="password" />
    <input type="password" />
</div>
<script>
    $("#psw input").on("keyup",function(ev){
       var oEv = event || ev;
       var val = $(this).val().trim(); 
       
       if(oEv.keyCode==8){
           $(this).prev().focus()
       }else{
           if(val){
               $(this).next().focus();
           }
       }   
    });
</script>

Answer 3

latter-space试试？

Answer 4

用span，input设置opacity为0，点击passbox，input获得焦点，监听input的oninput给span生成●

 <div class="passbox">
                  <input type="number" id="ipt"/>    
                  <span></span>
                  <span></span>
                  <span></span>
          </div>