zoukankan      html  css  js  c++  java
  • 分享一个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;
       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;
         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()
          }
        }
      }

    如有考虑不周的,请指出

  • 相关阅读:
    当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'tb_User' 中的标识列插入显式值。
    版本控制器Vss和svn
    判断浏览器刷新与关闭的代码
    web开发过程中要注意的问题(二)【转】
    JS版include函数
    兼容FF/IE的添加收藏夹的代码
    jQuery技巧总结
    把JS与CSS写在同一个文件里
    CSS hack浏览器兼容一览表
    利用JS获取IE客户端IP及MAC的实现
  • 原文地址:https://www.cnblogs.com/kdcg/p/9111158.html
Copyright © 2011-2022 走看看