vue實現(xiàn)驗證碼輸入框組件
更新時間：2017年12月14日 16:25:09 作者：liusong
最近做項目遇到這樣的需求要求輸入4位或6位短信驗證碼，輸入完成后收起鍵盤。實現(xiàn)步驟大家參考下本文
先來看波完成效果圖
需求
輸入4位或6位短信驗證碼，輸入完成后收起鍵盤
實現(xiàn)步驟
第一步
布局排版
<div class="security-code-wrap">
<label for="code">
<ul class="security-code-container">
<li class="field-wrap" v-for="(item, index) in number" :key="index">
<i class="char-field">{{value[index] || placeholder}}</i>
</li>
</ul>
</label>
<input ref="input" class="input-code" @keyup="handleInput($event)" v-model="value"
id="code" name="code" type="tel" :maxlength="number"
autocorrect="off" autocomplete="off" autocapitalize="off">
</div>
使用li元素來模擬輸入框的顯示，沒有別的目的，就只是為了語義化，當然你也可以使用其他任意一個元素來模擬，比如div。
使用label標簽的好處在于它可以跟input的click事件關(guān)聯(lián)上，一方面實現(xiàn)了語義化解決方案，另一方面也省去了我們通過js來喚起虛擬鍵盤。
隱藏輸入框
.input-code {
position: absolute;
left: -9999px;
top: -99999px;
width: 0;
height: 0;
opacity: 0;
overflow: visible;
z-index: -1;
}
將真實的輸入框定位到屏幕可視區(qū)域以外的地方，虛擬鍵盤被喚起時，就不會將頁面往上頂了。所以你的驗證碼輸入組件一定要放在虛擬鍵盤遮擋不了的地方。
第二步
處理驗證碼輸入
handleSubmit() {
this.$emit('input', this.value)
},
handleInput(e) {
this.$refs.input.value = this.value
if (this.value.length >= this.number) {
this.hideKeyboard()
}
this.handleSubmit()
}
輸入時，給輸入框賦一次值，是為了解決android端上輸入框失焦后重新聚焦，輸入光標會定在第一位的前面，經(jīng)過賦值再聚焦，光標的位置就會顯示在最后一位后面。
第三步
完成輸入后關(guān)閉虛擬鍵盤
hideKeyboard() {
// 輸入完成隱藏鍵盤
document.activeElement.blur() // ios隱藏鍵盤
this.$refs.input.blur() // android隱藏鍵盤
}
組件完整代碼
<!--四位驗證碼輸入框組件-->
<template>
<div class="security-code-wrap">
<label for="code">
<ul class="security-code-container">
<li class="field-wrap" v-for="(item, index) in number" :key="index">
<i class="char-field">{{value[index] || placeholder}}</i>
</li>
</ul>
</label>
<input ref="input" class="input-code" @keyup="handleInput($event)" v-model="value"
id="code" name="code" type="tel" :maxlength="number"
autocorrect="off" autocomplete="off" autocapitalize="off">
</div>
</template>
<script>
export default {
name: 'SecurityCode',
// component properties
props: {
number: {
type: Number,
default: 4
},
placeholder: {
type: String,
default: '-'
}
},
// variables
data() {
return {
value: ''
}
},
methods: {
hideKeyboard() {
// 輸入完成隱藏鍵盤
document.activeElement.blur() // ios隱藏鍵盤
this.$refs.input.blur() // android隱藏鍵盤
},
handleSubmit() {
this.$emit('input', this.value)
},
handleInput(e) {
this.$refs.input.value = this.value
if (this.value.length >= this.number) {
this.hideKeyboard()
}
this.handleSubmit()
}
}
}
</script>
<style scoped lang="less">
.security-code-wrap {
overflow: hidden;
}
.security-code-container {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
.field-wrap {
list-style: none;
display: block;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 16px;
background-color: #fff;
margin: 2px;
color: #000;
.char-field {
font-style: normal;
}
}
}
.input-code {
position: absolute;
left: -9999px;
top: -99999px;
width: 0;
height: 0;
opacity: 0;
overflow: visible;
z-index: -1;
}
</style>
組件使用代碼
<security-code v-model="authCode"></security-code>
總結(jié)
以上所述是小編給大家介紹的vue實現(xiàn)驗證碼輸入框組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
本文主要介紹了vue-element-admin配置小結(jié)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
隨著Vue3的日益成熟,越來越多的團隊開始考慮將現(xiàn)有Vue2項目升級到Vue3,作為一次重大版本更新,Vue3在帶來性能提升和新特性的同時,也引入了一些不兼容的變化,本文將全面解析Vue2到Vue3升級過程中需要注意的關(guān)鍵點,幫助你順利完成遷移,需要的朋友可以參考下2025-04-04
Vue3實現(xiàn)clipboard復(fù)制的使用示例
在日常開發(fā)中,為用戶提供復(fù)制文本功能的需求比較常見,下面介紹一款vue3可用的插件,可以快速實現(xiàn)這個功能,感興趣的可以了解一下2023-11-11
這篇文章主要介紹了antd table按表格里的日期去排序操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
本文分享如何在Vue 3中實現(xiàn)一個簡單的歌詞滾動效果,我將從歌詞數(shù)據(jù)的處理開始,一步步介紹布局的搭建和事件的實現(xiàn),感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要介紹了Vue el-upload單圖片上傳功能實現(xiàn),本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
Vue.js3.2響應(yīng)式部分的優(yōu)化升級詳解
這篇文章主要為大家介紹了Vue.js3.2響應(yīng)式部分的優(yōu)化升級詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
iview實現(xiàn)select tree樹形下拉框的示例代碼
這篇文章主要介紹了iview實現(xiàn)select tree樹形下拉框的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要介紹了vue中使用帶隱藏文本信息的圖片、圖片水印的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了vue高級特性的相關(guān)知識，文中介紹非常細致，幫助大家更好的參考和學(xué)習(xí)，感興趣的朋友可以了解下2020-06-06