HTML5实现输入密码（六个格子）

Posted 2020-09-22

我的思路：用六个li充当六个格子，同时将input框隐藏，点击承载六个格子的容器时，使焦点聚焦在input上，可以输入。通过监听input框输入的长度，控制格子内小黑点是否显示，同时用正则替换非数字。

因为是用vue开发，并不是所有人粘贴就能使用，不过思路和实现过程都很简单明了。

下面是贴代码：

html部分

  <div id="payPwd">
    <div style="text-align: center">
      支付密码设置
    </div>
    <input ref="pwd" type="password" maxlength="6" v-model="msg"  style="position: absolute;z-index: -1;opacity: 0"/>
    <ul class="pwd-wrap" @click="focus">
      <li><i v-if="msgLength > 0"></i></li>
      <li><i v-if="msgLength > 1"></i></li>
      <li><i v-if="msgLength > 2"></i></li>
      <li><i v-if="msgLength > 3"></i></li>
      <li><i v-if="msgLength > 4"></i></li>
      <li><i v-if="msgLength > 5"></i></li>
    </ul>
  </div>

 css部分

<style lang="less" scoped >
  html,body{
    width: 100%;
    height: 100%;
    background: #fbf9fe;
  }
  #payPwd .pwd-wrap{
    width: 90%;
    height: 44px;
    padding-bottom: 1px;
    margin: 0 auto;
    background: #fff;
    border:1px solid #ddd;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    cursor: pointer;
  }
  .pwd-wrap li{
    list-style-type:none;
    text-align: center;
    line-height: 44px;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-flex: 1;
    border-right:1px solid #ddd ;
  }
  .pwd-wrap li:last-child{
    border-right: 0;
  }
  .pwd-wrap li i{
    height: 10px;
    width: 10px;
    border-radius:50% ;
    background: #000;
    display: inline-block;
  }
</style>

JS部分

<script>

  export default {
    components: {
    },
    data () {
      return {
        msg:‘‘,
        msgLength:0,
      }
    },
    created() {
    },
    computed: {
    },
    watch:{
      msg(curVal){
        if(/[^\\d]/g.test(curVal)){
          this.msg = this.msg.replace(/[^\\d]/g,‘‘);
        }else{
            this.msgLength = curVal.length;
        }
      },
    },
    methods: {
      focus(){
          this.$refs.pwd.focus();
      },
    }
  }

</script>

最后是界面效果，有些简单。