溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“vue3怎么實現6位支付密碼輸入框”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
具體的需求： 在客戶信息表格的操作欄中，點擊修改支付密碼按鈕，會跳轉到6位支付密碼輸入框組件頁面。同時，要求輸入框密文顯示、不可編輯、不可回退、即時顯示；到達6位數，自動進入確認支付密碼；確認支付密碼到達6位數，自動檢驗兩次輸入密碼的一致性，顯示確定按鈕。此功能是為了用于在銀行中，客戶用設備輸入密碼，柜員不可見密碼，但柜員可以進行提示操作。
具體的問題： 1、如何實現密文顯示，且每個框只能輸入1位數字；2、如何實現輸入框不可編輯、不可回退；3、如何檢驗兩次輸入密碼的一致性；4、如果自己的業務需要對鍵盤按鍵做限制，該怎么處理。
實現6位支付密碼輸入框組件的代碼如下，復制即可直接使用！
<template>
<div >
<!-- 密碼輸入框 -->
<div class="input-box" >
<!-- 輸入密碼 -->
<div >{{ "輸入密碼" }}</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 >{{ "確認密碼" }}</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 >
<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
>
<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位支付密碼輸入框”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
