vue3如何實現(xiàn)?6位支付密碼輸入框

更新時間：2023年04月27日 15:46:58 作者：前端愛碼獅

微信、支付寶支付密碼時的密碼輸入框大家都很熟悉，本文主要介紹了vue3如何實現(xiàn)?6位支付密碼輸入框，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

具體的需求： 在客戶信息表格的操作欄中，點擊修改支付密碼按鈕，會跳轉(zhuǎn)到6位支付密碼輸入框組件頁面。同時，要求輸入框密文顯示、不可編輯、不可回退、即時顯示；到達6位數(shù)，自動進入確認支付密碼；確認支付密碼到達6位數(shù)，自動檢驗兩次輸入密碼的一致性，顯示確定按鈕。此功能是為了用于在銀行中，客戶用設(shè)備輸入密碼，柜員不可見密碼，但柜員可以進行提示操作。

具體的問題： 1、如何實現(xiàn)密文顯示，且每個框只能輸入1位數(shù)字；2、如何實現(xiàn)輸入框不可編輯、不可回退；3、如何檢驗兩次輸入密碼的一致性；4、如果自己的業(yè)務需要對鍵盤按鍵做限制，該怎么處理。

今天，我們就在這篇文章，用最簡潔的語言，來好好地理理上述問題。

一、代碼總覽

實現(xiàn)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>
    <!-- 提示區(qū) -->
    <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({
  // 輸入數(shù)組
  input: ["", "", "", "", "", ""],
  // 確認輸入數(shù)組
  confirmInput: ["", "", "", "", "", ""],
  // 存放粘貼進來的數(shù)字
  pasteResult: [],
  confirmPasteResult: [],
  // 一上來禁用確定按鈕
  disabledConfirm: true,
  // 輸入框是否禁用
  disabledInput: [false, false, false, false, false, false],
  disabledConfirmInput: [false, false, false, false, false, false],
  // 提示內(nèi)容
  tipContent: "請告知客戶輸入6位數(shù)字密碼，輸入完畢后，點擊回車確認。"
})
// 獲取第一個元素的ref
const firstinput = ref()
const confirmfirstinput = ref()
// 頁面一加載就使第一個框聚焦
onMounted(() => {
  // 等待dom渲染完成，在執(zhí)行focus,否則無法獲取到焦點
  nextTick(() => {
    firstinput.value.focus();
  });
})
// @input的處理方法
// 解決一個輸入框輸入多個字符
const inputEvent = (e) => {
  var index = e.target.dataset.index * 1;
  var el = e.target;
  // 限制只能輸入數(shù)字
  el.value = el.value.replace(/[^\d]/g, "");
  if (el.value.length >= 1) {
    // 密文顯示、不可編輯、不可回退、即時顯示
    state.disabledInput[index] = true;
    if (el.nextElementSibling) {
      el.nextElementSibling.focus();
    }
  }
  // 到達6位數(shù)，自動進入確認支付密碼
  if (!el.nextElementSibling) {
    confirmfirstinput.value.focus();
    state.tipContent = "請告知客戶再次輸入6位數(shù)字密碼，輸入完畢后，點擊回車確認。";
  }
}
// @keydown的處理方法，根據(jù)業(yè)務需要添加
// 此示例沒有使用
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位數(shù)，自動檢驗兩次輸入密碼的一致性
  if (!el.nextElementSibling) {
    // 一一比較元素值，有一個不相等就不等
    for (let i = 0; i < state.input.length; i++) {
      if (state.input[i] !== state.confirmInput[i]) {
        state.tipContent = "請告知客戶兩次密碼輸入不一致，柜員點擊重新輸入，清空密碼后請告知客戶重新輸入。";
        return;
      }
    }
    state.tipContent = "密碼合規(guī)，點擊確定按鈕進行修改。";
    // 確定按鈕變?yōu)榭捎?
    state.disabledConfirm = false;
  }
}
// @keydown的處理方法，根據(jù)業(yè)務需要添加
// 此示例沒有使用
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位數(shù)字密碼，輸入完畢后，點擊回車確認。";
  state.input = ["", "", "", "", "", ""];
  state.confirmInput = ["", "", "", "", "", ""];
  state.disabledInput = [false, false, false, false, false, false];
  state.disabledConfirmInput = [false, false, false, false, false, false];
  // 等待dom渲染完成，在執(zhí)行focus,否則無法獲取到焦點
  nextTick(() => {
    firstinput.value.focus();
  });
}
// 確認修改
const reConfirm = () => {
  ElMessageBox.confirm(
    '是否確定修改?',
    '溫馨提示',
    {
      confirmButtonText: '確定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // 此處調(diào)修改支付密碼接口
      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、問：如何實現(xiàn)密文顯示，且每個框只能輸入1位數(shù)字？

答：對于實現(xiàn)密文顯示，將輸入框的類型type改成password即可。對于實現(xiàn)每個框只能輸入1位數(shù)字，這里只使用輸入框的maxlength屬性效果并不完美，可能會出現(xiàn)限制不住的情況，需要在@input事件中，判斷當前元素值的長度，如果大于等于1，則通過nextElementSibling.focus()，讓光標聚焦到下一個兄弟元素上去。

2、問：如何實現(xiàn)輸入框不可編輯、不可回退？

答：使用了輸入框的disabled屬性，通過在@input事件中，將當前輸入元素的disabled屬性變?yōu)閠rue即可。這里把輸入框的disabled屬性值，分別存在了一個數(shù)組中，為了方便后續(xù)的獲取修改。

3、問：如何檢驗兩次輸入密碼的一致性？

答：使用了最簡單的for循環(huán)，遍歷輸入密碼數(shù)組和確認密碼數(shù)組，一一比較它們的元素值，有一個不相等就不等，通過return;結(jié)束整個函數(shù)的執(zhí)行。

4、問：如果自己的業(yè)務需要對鍵盤按鍵做限制，該怎么處理？

答：可以為輸入框添加@keydown或@keyup事件，在回調(diào)內(nèi)部通過對key做判斷，來對不同的按鍵做一些業(yè)務的處理。

到此這篇關(guān)于vue3如何實現(xiàn)?6位支付密碼輸入框的文章就介紹到這了,更多相關(guān)vue3 支付密碼輸入框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: