经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue3如何实现?6位支付密码输入框
来源：jb51　　时间：2023/4/28 9:24:54　　对本文有异议

今天要和大家分享的是关于如何实现6位支付密码输入框组件。

因为在web端不像移动端那样，它没有成熟的、已封装好的6位支付密码输入框UI组件，所以需要我们自己来进行处理，从布局、样式、功能等方面进行实现，在此做一下记录。

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

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

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

一、代码总览

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

  1. <template>
  2.   <div style="display: flex; flex-direction: column">
  3.     <!-- 密码输入框 -->
  4.     <div class="input-box" style="margin: auto">
  5.       <!-- 输入密码 -->
  6.       <div style="font-size: 20px; margin-bottom: 5px">{{ "输入密码" }}</div>
  7.       <div class="input-content" @keyup="keyup" @input="inputEvent">
  8.         <input max="9" min="0" maxlength="1" data-index="0" v-model.number="state.input[0]" type="password"
  9.           ref="firstinput" :disabled="state.disabledInput[0]" />
  10.         <input max="9" min="0" maxlength="1" data-index="1" v-model.number="state.input[1]" type="password"
  11.           :disabled="state.disabledInput[1]" />
  12.         <input max="9" min="0" maxlength="1" data-index="2" v-model.number="state.input[2]" type="password"
  13.           :disabled="state.disabledInput[2]" />
  14.         <input max="9" min="0" maxlength="1" data-index="3" v-model.number="state.input[3]" type="password"
  15.           :disabled="state.disabledInput[3]" />
  16.         <input max="9" min="0" maxlength="1" data-index="4" v-model.number="state.input[4]" type="password"
  17.           :disabled="state.disabledInput[4]" />
  18.         <input max="9" min="0" maxlength="1" data-index="5" v-model.number="state.input[5]" type="password"
  19.           :disabled="state.disabledInput[5]" />
  20.       </div>
  21.       <!-- 确认密码 -->
  22.       <div style="margin-top: 30px; font-size: 20px; margin-bottom: 5px">{{ "确认密码" }}</div>
  23.       <div class="input-content" @keyup="confirmKeyUp" @input="confirmInputEvent">
  24.         <input max="9" min="0" maxlength="1" data-index="0" v-model.number="state.confirmInput[0]" type="password"
  25.           ref="confirmfirstinput" :disabled="state.disabledConfirmInput[0]" />
  26.         <input max="9" min="0" maxlength="1" data-index="1" v-model.number="state.confirmInput[1]" type="password"
  27.           :disabled="state.disabledConfirmInput[1]" />
  28.         <input max="9" min="0" maxlength="1" data-index="2" v-model.number="state.confirmInput[2]" type="password"
  29.           :disabled="state.disabledConfirmInput[2]" />
  30.         <input max="9" min="0" maxlength="1" data-index="3" v-model.number="state.confirmInput[3]" type="password"
  31.           :disabled="state.disabledConfirmInput[3]" />
  32.         <input max="9" min="0" maxlength="1" data-index="4" v-model.number="state.confirmInput[4]" type="password"
  33.           :disabled="state.disabledConfirmInput[4]" />
  34.         <input max="9" min="0" maxlength="1" data-index="5" v-model.number="state.confirmInput[5]" type="password"
  35.           :disabled="state.disabledConfirmInput[5]" />
  36.       </div>
  37.     </div>
  38.     <!-- 按钮 -->
  39.     <div style="margin: auto; margin-top: 30px">
  40.       <el-button type="info" :disabled="state.disabledConfirm" @click="reConfirm"
  41.         :class="[state.disabledConfirm ? 'noActive' : 'active']">{{ "确定" }}</el-button>
  42.       <el-button type="warning" @click="reset">{{ "重新输入" }}</el-button>
  43.     </div>
  44.     <!-- 提示区 -->
  45.     <div
  46.       style="width: 500px; height: 200px; padding: 10px; border: 1px solid #ccc; margin: auto; margin-top: 30px; color: red; text-align: center; font-size: 24px">
  47.       <p>{{ state.tipContent }}</p>
  48.     </div>
  49.   </div>
  50. </template>
  51. <script lang="ts" setup>
  52. import { nextTick, reactive, ref, onMounted } from "vue";
  53. import { ElMessage, ElMessageBox } from 'element-plus'
  54. const state = reactive({
  55.   // 输入数组
  56.   input: ["", "", "", "", "", ""],
  57.   // 确认输入数组
  58.   confirmInput: ["", "", "", "", "", ""],
  59.   // 存放粘贴进来的数字
  60.   pasteResult: [],
  61.   confirmPasteResult: [],
  62.   // 一上来禁用确定按钮
  63.   disabledConfirm: true,
  64.   // 输入框是否禁用
  65.   disabledInput: [false, false, false, false, false, false],
  66.   disabledConfirmInput: [false, false, false, false, false, false],
  67.   // 提示内容
  68.   tipContent: "请告知客户输入6位数字密码，输入完毕后，点击回车确认。"
  69. })
  70. // 获取第一个元素的ref
  71. const firstinput = ref()
  72. const confirmfirstinput = ref()
  73. // 页面一加载就使第一个框聚焦
  74. onMounted(() => {
  75.   // 等待dom渲染完成，在执行focus,否则无法获取到焦点
  76.   nextTick(() => {
  77.     firstinput.value.focus();
  78.   });
  79. })
  80. // @input的处理方法
  81. // 解决一个输入框输入多个字符
  82. const inputEvent = (e) => {
  83.   var index = e.target.dataset.index * 1;
  84.   var el = e.target;
  85.   // 限制只能输入数字
  86.   el.value = el.value.replace(/[^\d]/g, "");
  87.   if (el.value.length >= 1) {
  88.     // 密文显示、不可编辑、不可回退、即时显示
  89.     state.disabledInput[index] = true;
  90.     if (el.nextElementSibling) {
  91.       el.nextElementSibling.focus();
  92.     }
  93.   }
  94.   // 到达6位数，自动进入确认支付密码
  95.   if (!el.nextElementSibling) {
  96.     confirmfirstinput.value.focus();
  97.     state.tipContent = "请告知客户再次输入6位数字密码，输入完毕后，点击回车确认。";
  98.   }
  99. }
  100. // @keydown的处理方法，根据业务需要添加
  101. // 此示例没有使用
  102. const keydown = (e) => {
  103.   var index = e.target.dataset.index * 1;
  104.   var el = e.target;
  105.   // 回退键
  106.   if (e.key === 'Backspace') {
  107.     if (state.input[index].length > 0) {
  108.       state.input[index] = ''
  109.     } else {
  110.       if (el.previousElementSibling) {
  111.         el.previousElementSibling.focus()
  112.         state.input[index - 1] = ''
  113.       }
  114.     }
  115.   }
  116.   // 删除键 
  117.   else if (e.key === 'Delete') {
  118.     if (state.input[index].length > 0) {
  119.       state.input[index] = ''
  120.     } else {
  121.       if (el.nextElementSibling) {
  122.         state.input[1] = ''
  123.       }
  124.     }
  125.     if (el.nextElementSibling) {
  126.       el.nextElementSibling.focus()
  127.     }
  128.   }
  129.   // 左键
  130.   else if (e.key === 'ArrowLeft') {
  131.     if (el.previousElementSibling) {
  132.       el.previousElementSibling.focus()
  133.     }
  134.   }
  135.   // 右键 
  136.   else if (e.key === 'ArrowRight') {
  137.     if (el.nextElementSibling) {
  138.       el.nextElementSibling.focus()
  139.     }
  140.   }
  141.   // 上键 
  142.   else if (e.key === 'ArrowUp') {
  143.     if (Number(state.input[index]) * 1 < 9) {
  144.       state.input[index] = (Number(state.input[index]) * 1 + 1).toString()
  145.     }
  146.   }
  147.   // 下键  
  148.   else if (e.key === 'ArrowDown') {
  149.     if (Number(state.input[index]) * 1 > 0) {
  150.       state.input[index] = (Number(state.input[index]) * 1 - 1).toString()
  151.     }
  152.   }
  153. }
  154. // @keyup的处理方法
  155. const keyup = (e) => {
  156.   var index = e.target.dataset.index * 1;
  157.   // 如果为最后一个框，则输入框全部失焦
  158.   if (index === 5) {
  159.     if (state.input.join("").length === 6) {
  160.       document.activeElement.blur();
  161.     }
  162.   }
  163. }
  164. // @input的处理方法
  165. // 解决一个输入框输入多个字符
  166. const confirmInputEvent = (e) => {
  167.   var index = e.target.dataset.index * 1;
  168.   var el = e.target;
  169.   if (el.value.length >= 1) {
  170.     // 密文显示、不可编辑、不可回退、即时显示
  171.     state.disabledConfirmInput[index] = true;
  172.     if (el.nextElementSibling) {
  173.       el.nextElementSibling.focus();
  174.     }
  175.   }
  176.   // 到达6位数，自动检验两次输入密码的一致性
  177.   if (!el.nextElementSibling) {
  178.     // 一一比较元素值，有一个不相等就不等
  179.     for (let i = 0; i < state.input.length; i++) {
  180.       if (state.input[i] !== state.confirmInput[i]) {
  181.         state.tipContent = "请告知客户两次密码输入不一致，柜员点击重新输入，清空密码后请告知客户重新输入。";
  182.         return;
  183.       }
  184.     }
  185.     state.tipContent = "密码合规，点击确定按钮进行修改。";
  186.     // 确定按钮变为可用
  187.     state.disabledConfirm = false;
  188.   }
  189. }
  190. // @keydown的处理方法，根据业务需要添加
  191. // 此示例没有使用
  192. const confirmKeydown = (e) => {
  193.   var index = e.target.dataset.index * 1;
  194.   var el = e.target;
  195.   // 回退键
  196.   if (e.key === 'Backspace') {
  197.     if (state.confirmInput[index].length > 0) {
  198.       state.confirmInput[index] = ''
  199.     } else {
  200.       if (el.previousElementSibling) {
  201.         el.previousElementSibling.focus()
  202.         state.confirmInput[index - 1] = ''
  203.       }
  204.     }
  205.   }
  206.   // 删除键 
  207.   else if (e.key === 'Delete') {
  208.     if (state.confirmInput[index].length > 0) {
  209.       state.confirmInput[index] = ''
  210.     } else {
  211.       if (el.nextElementSibling) {
  212.         state.confirmInput[1] = ''
  213.       }
  214.     }
  215.     if (el.nextElementSibling) {
  216.       el.nextElementSibling.focus()
  217.     }
  218.   }
  219.   // 左键
  220.   else if (e.key === 'ArrowLeft') {
  221.     if (el.previousElementSibling) {
  222.       el.previousElementSibling.focus()
  223.     }
  224.   }
  225.   // 右键 
  226.   else if (e.key === 'ArrowRight') {
  227.     if (el.nextElementSibling) {
  228.       el.nextElementSibling.focus()
  229.     }
  230.   }
  231.   // 上键 
  232.   else if (e.key === 'ArrowUp') {
  233.     if (Number(state.confirmInput[index]) * 1 < 9) {
  234.       state.confirmInput[index] = (Number(state.confirmInput[index]) * 1 + 1).toString()
  235.     }
  236.   }
  237.   // 下键  
  238.   else if (e.key === 'ArrowDown') {
  239.     if (Number(state.confirmInput[index]) * 1 > 0) {
  240.       state.confirmInput[index] = (Number(state.confirmInput[index]) * 1 - 1).toString()
  241.     }
  242.   }
  243. }
  244. // @keyup的处理方法
  245. const confirmKeyUp = (e) => {
  246.   var index = e.target.dataset.index * 1;
  247.   // 如果为最后一个框，则输入框全部失焦
  248.   if (index === 5) {
  249.     if (state.confirmInput.join("").length === 6) {
  250.       document.activeElement.blur();
  251.     }
  252.   }
  253. }
  254. // 重新输入
  255. const reset = () => {
  256.   state.disabledConfirm = true;
  257.   state.tipContent = "请告知客户输入6位数字密码，输入完毕后，点击回车确认。";
  258.   state.input = ["", "", "", "", "", ""];
  259.   state.confirmInput = ["", "", "", "", "", ""];
  260.   state.disabledInput = [false, false, false, false, false, false];
  261.   state.disabledConfirmInput = [false, false, false, false, false, false];
  262.   // 等待dom渲染完成，在执行focus,否则无法获取到焦点
  263.   nextTick(() => {
  264.     firstinput.value.focus();
  265.   });
  266. }
  267. // 确认修改
  268. const reConfirm = () => {
  269.   ElMessageBox.confirm(
  270.     '是否确定修改?',
  271.     '温馨提示',
  272.     {
  273.       confirmButtonText: '确定',
  274.       cancelButtonText: '取消',
  275.       type: 'warning',
  276.     }
  277.   )
  278.     .then(() => {
  279.       // 此处调修改支付密码接口
  280.       ElMessage({
  281.         type: 'success',
  282.         message: '修改成功!',
  283.       })
  284.     })
  285.     .catch(() => {
  286.       ElMessage({
  287.         type: 'info',
  288.         message: '已取消修改!',
  289.       })
  290.     })
  291. }
  292. </script>
  293. <style lang="scss" scoped>
  294. .input-box {
  295.   .input-content {
  296.     width: 512px;
  297.     height: 60px;
  298.     display: flex;
  299.     align-items: center;
  300.     justify-content: space-between;
  301.     input {
  302.       color: inherit;
  303.       font-family: inherit;
  304.       border: 0;
  305.       outline: 0;
  306.       border-bottom: 1px solid #919191;
  307.       height: 60px;
  308.       width: 60px;
  309.       font-size: 44px;
  310.       text-align: center;
  311.     }
  312.   }
  313.   input::-webkit-outer-spin-button,
  314.   input::-webkit-inner-spin-button {
  315.     appearance: none;
  316.     margin: 0;
  317.   }
  318. }
  319. .noActive {
  320.   color: #fff !important;
  321.   border-width: 0px !important;
  322.   background-color: #ccc !important;
  323. }
  324. .active {
  325.   color: #fff !important;
  326.   border-width: 0px !important;
  327.   background-color: #67c23a !important;
  328. }
  329. </style>
  330. 复制代码

二、问题解析

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 支付密码输入框内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Vue.js热门文章

  • vue3中getCurrentInstance示例讲解
  • vue3页面跳转的两种方式
  • vue3动态加载对话框的方法实例
  • vue之Element-Ui输入框显示与隐藏方式
  • 封装vue基于element的select多选时启用鼠标悬停折叠文字以tooltip显示具体所选值
  • vue播放flv、m3u8视频流(监控)的方法实例
  • vue实现手机验证码登录
  • vue实现图片预览放大以及缩小问题
  • Vue自定义指令中无法获取this的问题及解决
  • uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法

    • Vue.js推荐文章

  • 《花100块做个摸鱼小网站! 》第四篇—前端应用搭建和完成第一个热搜组件
  • 卧槽，牛逼！vue3的组件竟然还能“暂停”渲染！
  • 给我5分钟，保证教会你在vue3中动态加载远程组件
  • 业务场景---Token无感刷新
  • 前端如何处理后端一次性返回10万条数据？
  • Vite本地构建：手写核心原理
  • 70%的人都答错了的面试题，vue3的ref是如何实现响应式的？
  • VUE系列之性能优化--懒加载
  • Vue 3 后端错误消息处理范例
  • useCookie函数：管理SSR环境下的Cookie

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号