web设置支付密码样式

html内容：

自行准备一张关闭图片

<div class="inputPassword pay-dialog">
    <img class="close" src="img/close.png" alt="">
    <p class="info">请输入支付密码</p>
    <div class="pay-password">
        <input type="tel" maxlength="6" class="real-ipt" @input="passwordInput">
        <div class="surface-ipts">
            <div class="surface-ipt">
                <input type="password">
                <input type="password">
                <input type="password">
                <input type="password">
                <input type="password">
                <input type="password">
             </div>
        </div>
     </div>
    <p class="tips">忘记密码</p>
    <p class="btn">确认</p>
</div>

css部分：

.inputPassword,.noPassword{
  box-sizing: border-box;
  position: fixed;
  width: 6.2rem;
  height: 4.5rem;
  border: solid .02rem #ccc;
  top: 50%;
  left: 50%;
  margin-top: -2.5rem;
  margin-left: -3.1rem;
  z-index: 999;
  background-color: #fff;
  border-radius: .3rem;
  padding: .3rem;
  line-height: .6rem !important;
  text-align: left;
  font-weight: normal;
}
.nameLength{
  display: inline-block;
  max-width: 2rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
}
.info{
  font-size: .32rem;
  color: #222;
}
.noPassword .btn{
  display: flex;
  justify-content: space-between;
  border-top: .03rem solid #ddd;
  margin-top: .55rem;
}
.noPassword .btn p{
  width: 49%;
  height: .7rem;
  text-align: center;
  line-height: 1.05rem;
}
.noPassword .btn p:nth-of-type(1){
  border-right: .02rem solid #eee;
}
.noPassword .btn p:nth-of-type(2){
  color: #ff574d;
}
.inputPassword{
  text-align: center;
}
.inputPassword .close{
  position: absolute;
  width: .28rem;
  height: .28rem;
  top: .25rem;
  right: .25rem;
}
.pay-password{
  width: 4.5rem;
  height: .8rem;
  border: 1px solid #999999;
  margin: .35rem auto 0 auto;
  position: relative;
}
.pay-password .real-ipt{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: .8rem;
  line-height: .8rem;
  opacity: 0;
  z-index: 3;
}
.pay-password .surface-ipts{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: .8rem;
  line-height: .8rem;
  z-index: 1;
  overflow: hidden;
}
.pay-password .surface-ipts .surface-ipt{
  height: .8rem;
  line-height: .8rem;
  display: flex;
  justify-content: space-between;
}
.pay-password .surface-ipts .surface-ipt input{
  width: .7rem;
  height: .76rem;
  line-height: .76rem;
  border: 0;
  border-right: 1px solid #999999;
  color: #333333;
  font-size: .9rem;
  text-align: center;
  padding: 0;
}
.pay-password .surface-ipts .surface-ipt input:nth-last-of-type(1){
  border-right: none;
}
.inputPassword .tips{
  color: #ff574d;
  margin-top: .2rem;
}
.inputPassword .btn{
  width: 2.5rem;
  height: .7rem;
  line-height: .7rem;
  text-align: center;
  background-color: rgb(22, 155, 213);
  border-radius: .3rem;
  color: #fff;
  margin: .2rem auto 0 auto;
}

js内容：

// 输入密码
passwordInput:function(){
  var $inputs = $(".surface-ipt input");
  if (/^[0-9]*$/g.test($(".real-ipt").val())) {  //有值且只能是数字（正则）
      pwd = $(".real-ipt").val().trim();
      len = pwd.length;
      $inputs.each(function (item) { //将有值的当前input 后面的所有input清空
          $inputs.eq(item).val("");
      })
      for (var i in pwd) {
          $inputs.eq(i).val(pwd[i]);
      }
      $inputs.each(function (item) {
          var index = $(".real-ipt").index();
          if (index >= len) {
              $(".real-ipt").val("");
          }
      })    
  } else {    //清除val中的非数字，返回纯number的value
      var arr = $(".real-ipt").val().match(/\d/g);
      try {
          $(".real-ipt").val($(".real-ipt").val().slice(0,$(".real-ipt").val().lastIndexOf(arr[arr.length-1])+1));
      } catch(e) {
          //清空
          $(".real-ipt").val("");
      }
  }
}