vue3如何实现6位支付密码输入框

更新时间：2023年04月27日 15:46:58 作者：前端爱码狮

微信、支付宝支付密码时的密码输入框大家都很熟悉，本文主要介绍了vue3如何实现6位支付密码输入框，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

具体的需求： 在客户信息表格的操作栏中，点击修改支付密码按钮，会跳转到6位支付密码输入框组件页面。同时，要求输入框密文显示、不可编辑、不可回退、即时显示；到达6位数，自动进入确认支付密码；确认支付密码到达6位数，自动检验两次输入密码的一致性，显示确定按钮。此功能是为了用于在银行中，客户用设备输入密码，柜员不可见密码，但柜员可以进行提示操作。

具体的问题： 1、如何实现密文显示，且每个框只能输入1位数字；2、如何实现输入框不可编辑、不可回退；3、如何检验两次输入密码的一致性；4、如果自己的业务需要对键盘按键做限制，该怎么处理。

今天，我们就在这篇文章，用最简洁的语言，来好好地理理上述问题。

一、代码总览

实现6位支付密码输入框组件的代码如下，复制即可直接使用！

<template>
  <div style="display: flex; flex-direction: column">
    <!-- 密码输入框 -->
    <div class="input-box" style="margin: auto">
      <!-- 输入密码 -->
      <div style="font-size: 20px; margin-bottom: 5px">{{ "输入密码" }}</div>
      <div class="input-content" @keyup="keyup" @input="inputEvent">
        <input max="9" min="0" maxlength="1" data-index="0" v-model.number="state.input[0]" type="password"
          ref="firstinput" :disabled="state.disabledInput[0]" />
        <input max="9" min="0" maxlength="1" data-index="1" v-model.number="state.input[1]" type="password"
          :disabled="state.disabledInput[1]" />
        <input max="9" min="0" maxlength="1" data-index="2" v-model.number="state.input[2]" type="password"
          :disabled="state.disabledInput[2]" />
        <input max="9" min="0" maxlength="1" data-index="3" v-model.number="state.input[3]" type="password"
          :disabled="state.disabledInput[3]" />
        <input max="9" min="0" maxlength="1" data-index="4" v-model.number="state.input[4]" type="password"
          :disabled="state.disabledInput[4]" />
        <input max="9" min="0" maxlength="1" data-index="5" v-model.number="state.input[5]" type="password"
          :disabled="state.disabledInput[5]" />
      </div>
      <!-- 确认密码 -->
      <div style="margin-top: 30px; font-size: 20px; margin-bottom: 5px">{{ "确认密码" }}</div>
      <div class="input-content" @keyup="confirmKeyUp" @input="confirmInputEvent">
        <input max="9" min="0" maxlength="1" data-index="0" v-model.number="state.confirmInput[0]" type="password"
          ref="confirmfirstinput" :disabled="state.disabledConfirmInput[0]" />
        <input max="9" min="0" maxlength="1" data-index="1" v-model.number="state.confirmInput[1]" type="password"
          :disabled="state.disabledConfirmInput[1]" />
        <input max="9" min="0" maxlength="1" data-index="2" v-model.number="state.confirmInput[2]" type="password"
          :disabled="state.disabledConfirmInput[2]" />
        <input max="9" min="0" maxlength="1" data-index="3" v-model.number="state.confirmInput[3]" type="password"
          :disabled="state.disabledConfirmInput[3]" />
        <input max="9" min="0" maxlength="1" data-index="4" v-model.number="state.confirmInput[4]" type="password"
          :disabled="state.disabledConfirmInput[4]" />
        <input max="9" min="0" maxlength="1" data-index="5" v-model.number="state.confirmInput[5]" type="password"
          :disabled="state.disabledConfirmInput[5]" />
      </div>
    </div>
    <!-- 按钮 -->
    <div style="margin: auto; margin-top: 30px">
      <el-button type="info" :disabled="state.disabledConfirm" @click="reConfirm"
        :class="[state.disabledConfirm ? 'noActive' : 'active']">{{ "确定" }}</el-button>
      <el-button type="warning" @click="reset">{{ "重新输入" }}</el-button>
    </div>
    <!-- 提示区 -->
    <div
      style="width: 500px; height: 200px; padding: 10px; border: 1px solid #ccc; margin: auto; margin-top: 30px; color: red; text-align: center; font-size: 24px">
      <p>{{ state.tipContent }}</p>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { nextTick, reactive, ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
const state = reactive({
  // 输入数组
  input: ["", "", "", "", "", ""],
  // 确认输入数组
  confirmInput: ["", "", "", "", "", ""],
  // 存放粘贴进来的数字
  pasteResult: [],
  confirmPasteResult: [],
  // 一上来禁用确定按钮
  disabledConfirm: true,
  // 输入框是否禁用
  disabledInput: [false, false, false, false, false, false],
  disabledConfirmInput: [false, false, false, false, false, false],
  // 提示内容
  tipContent: "请告知客户输入6位数字密码，输入完毕后，点击回车确认。"
})
// 获取第一个元素的ref
const firstinput = ref()
const confirmfirstinput = ref()
// 页面一加载就使第一个框聚焦
onMounted(() => {
  // 等待dom渲染完成，在执行focus,否则无法获取到焦点
  nextTick(() => {
    firstinput.value.focus();
  });
})
// @input的处理方法
// 解决一个输入框输入多个字符
const inputEvent = (e) => {
  var index = e.target.dataset.index * 1;
  var el = e.target;
  // 限制只能输入数字
  el.value = el.value.replace(/[^\d]/g, "");
  if (el.value.length >= 1) {
    // 密文显示、不可编辑、不可回退、即时显示
    state.disabledInput[index] = true;
    if (el.nextElementSibling) {
      el.nextElementSibling.focus();
    }
  }
  // 到达6位数，自动进入确认支付密码
  if (!el.nextElementSibling) {
    confirmfirstinput.value.focus();
    state.tipContent = "请告知客户再次输入6位数字密码，输入完毕后，点击回车确认。";
  }
}
// @keydown的处理方法，根据业务需要添加
// 此示例没有使用
const keydown = (e) => {
  var index = e.target.dataset.index * 1;
  var el = e.target;
  // 回退键
  if (e.key === 'Backspace') {
    if (state.input[index].length > 0) {
      state.input[index] = ''
    } else {
      if (el.previousElementSibling) {
        el.previousElementSibling.focus()
        state.input[index - 1] = ''
      }
    }
  }
  // 删除键 
  else if (e.key === 'Delete') {
    if (state.input[index].length > 0) {
      state.input[index] = ''
    } else {
      if (el.nextElementSibling) {
        state.input[1] = ''
      }
    }
    if (el.nextElementSibling) {
      el.nextElementSibling.focus()
    }
  }
  // 左键
  else if (e.key === 'ArrowLeft') {
    if (el.previousElementSibling) {
      el.previousElementSibling.focus()
    }
  }
  // 右键 
  else if (e.key === 'ArrowRight') {
    if (el.nextElementSibling) {
      el.nextElementSibling.focus()
    }
  }
  // 上键 
  else if (e.key === 'ArrowUp') {
    if (Number(state.input[index]) * 1 < 9) {
      state.input[index] = (Number(state.input[index]) * 1 + 1).toString()
    }
  }
  // 下键  
  else if (e.key === 'ArrowDown') {
    if (Number(state.input[index]) * 1 > 0) {
      state.input[index] = (Number(state.input[index]) * 1 - 1).toString()
    }
  }
}
// @keyup的处理方法
const keyup = (e) => {
  var index = e.target.dataset.index * 1;
  // 如果为最后一个框，则输入框全部失焦
  if (index === 5) {
    if (state.input.join("").length === 6) {
      document.activeElement.blur();
    }
  }
}
// @input的处理方法
// 解决一个输入框输入多个字符
const confirmInputEvent = (e) => {
  var index = e.target.dataset.index * 1;
  var el = e.target;
  if (el.value.length >= 1) {
    // 密文显示、不可编辑、不可回退、即时显示
    state.disabledConfirmInput[index] = true;
    if (el.nextElementSibling) {
      el.nextElementSibling.focus();
    }
  }
  // 到达6位数，自动检验两次输入密码的一致性
  if (!el.nextElementSibling) {
    // 一一比较元素值，有一个不相等就不等
    for (let i = 0; i < state.input.length; i++) {
      if (state.input[i] !== state.confirmInput[i]) {
        state.tipContent = "请告知客户两次密码输入不一致，柜员点击重新输入，清空密码后请告知客户重新输入。";
        return;
      }
    }
    state.tipContent = "密码合规，点击确定按钮进行修改。";
    // 确定按钮变为可用
    state.disabledConfirm = false;
  }
}
// @keydown的处理方法，根据业务需要添加
// 此示例没有使用
const confirmKeydown = (e) => {
  var index = e.target.dataset.index * 1;
  var el = e.target;
  // 回退键
  if (e.key === 'Backspace') {
    if (state.confirmInput[index].length > 0) {
      state.confirmInput[index] = ''
    } else {
      if (el.previousElementSibling) {
        el.previousElementSibling.focus()
        state.confirmInput[index - 1] = ''
      }
    }
  }
  // 删除键 
  else if (e.key === 'Delete') {
    if (state.confirmInput[index].length > 0) {
      state.confirmInput[index] = ''
    } else {
      if (el.nextElementSibling) {
        state.confirmInput[1] = ''
      }
    }
    if (el.nextElementSibling) {
      el.nextElementSibling.focus()
    }
  }
  // 左键
  else if (e.key === 'ArrowLeft') {
    if (el.previousElementSibling) {
      el.previousElementSibling.focus()
    }
  }
  // 右键 
  else if (e.key === 'ArrowRight') {
    if (el.nextElementSibling) {
      el.nextElementSibling.focus()
    }
  }
  // 上键 
  else if (e.key === 'ArrowUp') {
    if (Number(state.confirmInput[index]) * 1 < 9) {
      state.confirmInput[index] = (Number(state.confirmInput[index]) * 1 + 1).toString()
    }
  }
  // 下键  
  else if (e.key === 'ArrowDown') {
    if (Number(state.confirmInput[index]) * 1 > 0) {
      state.confirmInput[index] = (Number(state.confirmInput[index]) * 1 - 1).toString()
    }
  }
}
// @keyup的处理方法
const confirmKeyUp = (e) => {
  var index = e.target.dataset.index * 1;
  // 如果为最后一个框，则输入框全部失焦
  if (index === 5) {
    if (state.confirmInput.join("").length === 6) {
      document.activeElement.blur();
    }
  }
}
// 重新输入
const reset = () => {
  state.disabledConfirm = true;
  state.tipContent = "请告知客户输入6位数字密码，输入完毕后，点击回车确认。";
  state.input = ["", "", "", "", "", ""];
  state.confirmInput = ["", "", "", "", "", ""];
  state.disabledInput = [false, false, false, false, false, false];
  state.disabledConfirmInput = [false, false, false, false, false, false];
  // 等待dom渲染完成，在执行focus,否则无法获取到焦点
  nextTick(() => {
    firstinput.value.focus();
  });
}
// 确认修改
const reConfirm = () => {
  ElMessageBox.confirm(
    '是否确定修改?',
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // 此处调修改支付密码接口
      ElMessage({
        type: 'success',
        message: '修改成功!',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消修改!',
      })
    })
}
</script>
<style lang="scss" scoped>
.input-box {
  .input-content {
    width: 512px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    input {
      color: inherit;
      font-family: inherit;
      border: 0;
      outline: 0;
      border-bottom: 1px solid #919191;
      height: 60px;
      width: 60px;
      font-size: 44px;
      text-align: center;
    }
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }
}
.noActive {
  color: #fff !important;
  border-width: 0px !important;
  background-color: #ccc !important;
}
.active {
  color: #fff !important;
  border-width: 0px !important;
  background-color: #67c23a !important;
}
</style>
复制代码

二、问题解析

1、问：如何实现密文显示，且每个框只能输入1位数字？

答：对于实现密文显示，将输入框的类型type改成password即可。对于实现每个框只能输入1位数字，这里只使用输入框的maxlength属性效果并不完美，可能会出现限制不住的情况，需要在@input事件中，判断当前元素值的长度，如果大于等于1，则通过nextElementSibling.focus()，让光标聚焦到下一个兄弟元素上去。

2、问：如何实现输入框不可编辑、不可回退？

答：使用了输入框的disabled属性，通过在@input事件中，将当前输入元素的disabled属性变为true即可。这里把输入框的disabled属性值，分别存在了一个数组中，为了方便后续的获取修改。

3、问：如何检验两次输入密码的一致性？

答：使用了最简单的for循环，遍历输入密码数组和确认密码数组，一一比较它们的元素值，有一个不相等就不等，通过return;结束整个函数的执行。

4、问：如果自己的业务需要对键盘按键做限制，该怎么处理？

答：可以为输入框添加@keydown或@keyup事件，在回调内部通过对key做判断，来对不同的按键做一些业务的处理。

到此这篇关于vue3如何实现6位支付密码输入框的文章就介绍到这了,更多相关vue3 支付密码输入框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解Vue3中对VDOM的改进
这篇文章主要介绍了详解Vue3中对VDOM的改进，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
vue等待数据渲染完成后执行下一个方法问题
这篇文章主要介绍了vue等待数据渲染完成后执行下一个方法问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
element-ui table组件如何使用render属性的实现
这篇文章主要介绍了element-ui table组件如何使用render属性的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
vue2+element-ui+nodejs实现图片上传和修改图片到数据库的方法
在Web开发中经常需要使用图片,有时候需要对图片进行上传,这篇文章主要给大家介绍了关于vue2+element-ui+nodejs实现图片上传和修改图片到数据库的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-04-04
Vue简介、引入、命令式与声明式编程详解
原生开发和Vue开发的模式和特点,我们会发现是完全不同的,这里其实涉及到两种不同的编程范式:命令式编程和声明式编程,下面这篇文章主要给大家介绍了关于Vue简介、引入、命令式与声明式编程的相关资料,需要的朋友可以参考下
2022-10-10
Vue+LogicFlow+Flowable实现工作流
本文主要介绍了Vue+LogicFlow+Flowable实现工作流,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-12-12
VUE 动态组件的应用案例分析
这篇文章主要介绍了VUE 动态组件的应用,结合具体案例形式分析了vue.js动态组件的应用场景、解决方案及相关操作技巧,需要的朋友可以参考下
2019-12-12
手写实现vue2下拉菜单dropdown组件实例
这篇文章主要为大家介绍了手写vue2下拉菜单dropdown组件实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
Vue Echarts实现带滚动效果的柱形图
这篇文章主要为大家详细介绍了Vue Echarts实现带滚动效果的柱形图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
解决vue-loader加载不上的问题
这篇文章主要介绍了解决vue-loader加载不上的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10