HTML5實現輸入密碼（六個格子）

標籤：lan   顯示   nbsp   nts   .com   created   poi   開發   pass   

我的思路：用六個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>

最後是介面效果，有些簡單。

 

HTML5實現輸入密碼（六個格子）