分享一个PC端六格密码输入框写法

如图。我们一般做商城类的项目不免会用到支付密码输入框，我研究了下并决定发上来，也当作是自己成长路上的一点小小的记录。本次介绍的是基于vue的项目

html：

<template>
  <div class='am_payPwd' :id="`ids_${id}`">
    <input type="password"
      maxlength="1"
      @input="changeInput"
      @click="changePwd"
      v-model="pwdList[i]"
      @keyup="keyUp($event)"
      @keydown="oldPwdList = pwdList.length"
      class="shortInput"
      v-for="(v, i) in 6" :key="i">
  </div>
</template>

css:

.am_payPwd {
  display: inline-block;
  width: 242px;
  height: 40px;
  border: 1px solid #999;
  border-radius: 5px;
  padding: 10px 0;
  position: relative;
  margin-left: 1px;
  .shortInput {
    text-align: center;
    font-size: 20px;
    float: left;
    width: 40px;
    height: 20px;
    color: #333;
    outline: #ff0067;
    &:not(:last-child) {
      border-right: 1px solid #999;
    }
  }
}

js:

  data () {
    return {
      pwdList: [],
      oldPwdList: [],
      isDelete: false,
      ipt: ''
    }
  },
  props: {
    id: String, // 当一个页面有多个密码输入框时，用id来区分
    default: '1'
  },
  mounted () {　　
    this.ipt = document.querySelectorAll(`#ids_${this.id} .shortInput`)
  },
  methods: {
    keyUp (ev) {
      let index = this.pwdList.length
      if (!index) return
      if (ev.keyCode === 8) {
        this.isDelete = true
        if (this.oldPwdList === this.pwdList.length) {
          if (index === this.pwdList.length) {
            this.pwdList.pop()
          }
          index--
        } else {
          index > 0 && index--
        }
        this.ipt[index].focus()
      } else if (this.isDelete && index === this.pwdList.length && /^\d$/.test(ev.key)) {
        this.isDelete = false
        this.pwdList.pop()
        this.pwdList.push(ev.key)
        this.ipt[this.pwdList.length] && this.ipt[this.pwdList.length].focus()
      }
      this.$emit('getPwd', this.pwdList.join(''))
    },
    changePwd () {
      let index = this.pwdList.length
      index === 6 && index--
      this.ipt[index].focus()
    },
    changeInput () {
      let index = this.pwdList.length
      let val = this.pwdList[index - 1]
　　   if (!/[0-9]/.test(val)) {　
        this.pwdList.pop() 　　　　  　　　　 
        return 　　　 　　
      }
      if (!val) {
        this.pwdList.pop()
        index--
        if (index > 0) this.ipt[index - 1].focus()
      } else {
        if (index < 6) this.ipt[index].focus()
      }
    }
  }

 

如有考虑不周的，请指出

 

每一次的记录，都是向前迈进的一步