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

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

如图。我们一般做商城类的项目不免会用到支付密码输入框,我研究了下并决定发上来,也当作是自己成长路上的一点小小的记录。本次介绍的是基于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()
      }
    }
  }

 

如有考虑不周的,请指出

 

每一次的记录,都是向前迈进的一步
目录
相关文章
|
15天前
|
人工智能
四大公益场景,20万奖金!AI开源公益创新挑战赛邀你一起「小有可为」
四大公益场景,20万奖金!AI开源公益创新挑战赛邀你一起「小有可为」
92 8
|
7月前
|
算法 数据可视化 BI
基于免疫算法的最优物流仓储点选址方案MATLAB仿真
本程序基于免疫算法实现物流仓储点选址优化,并通过MATLAB 2022A仿真展示结果。核心代码包括收敛曲线绘制、最优派送路线规划及可视化。算法模拟生物免疫系统,通过多样性生成、亲和力评价、选择、克隆、变异和抑制机制,高效搜索最优解。解决了物流仓储点选址这一复杂多目标优化问题,显著提升物流效率与服务质量。附完整无水印运行结果图示。
186 20
基于免疫算法的最优物流仓储点选址方案MATLAB仿真
|
7月前
|
自然语言处理 安全 开发工具
分享一个纯净无广、原版操作系统、开发人员工具、服务器等资源免费下载的网站
分享一个纯净无广、原版操作系统、开发人员工具、服务器等资源免费下载的网站
288 4
|
JavaScript
js金额数字格式化
本文介绍了两种实现数字格式化的方法:字符串操作与正则表达式。首先,通过递归地在每三位数字间插入逗号来格式化整数。接着,扩展该功能以支持自定义小数位数及分隔符,适用于更广泛的场景。最后,展示了如何利用正则表达式简化上述过程,实现相同的功能。
334 0
|
机器学习/深度学习 传感器 人工智能
【博士每天一篇论文-综述】Brain Inspired Computing : A Systematic Survey and Future Trends
本文提供了对脑启发计算(BIC)领域的系统性综述,深入探讨了BIC的理论模型、硬件架构、软件工具、基准数据集,并分析了该领域在人工智能中的重要性、最新进展、主要挑战和未来发展趋势。
326 2
【博士每天一篇论文-综述】Brain Inspired Computing : A Systematic Survey and Future Trends
Unity精华☀️Audio Mixer终极教程:用《双人成行》讲解它的用途
Unity精华☀️Audio Mixer终极教程:用《双人成行》讲解它的用途
|
JavaScript 前端开发 C++
vscode编辑器中如何调试nextjs代码
代码可调式的重要性不言而喻。 对于Programer来说,自己编写的程序能够被优雅调试是一件幸福的事情,特别是习惯了后端程序调试的开发者... 在折腾Nextjs项目的日子里,我走了很多弯路才弄明白在vs code中如何优雅的调试代码。
1039 1
vscode编辑器中如何调试nextjs代码
|
Web App开发 前端开发
设计,兼容性----字体-------Css样式的字体,字体样式导入
设计,兼容性----字体-------Css样式的字体,字体样式导入
|
JavaScript 前端开发
报错:Cannot read properties of undefined (reading ‘$message‘)解决方法
以上就是解决"Cannot read properties of undefined (reading ‘$message‘)"错误的几种方法,希望对你有所帮助。
6490 0