vue實(shí)現(xiàn)驗(yàn)證碼輸入框組件
更新時(shí)間：2017年12月14日 16:25:09 作者：liusong
最近做項(xiàng)目遇到這樣的需求要求輸入4位或6位短信驗(yàn)證碼，輸入完成后收起鍵盤。實(shí)現(xiàn)步驟大家參考下本文
先來(lái)看波完成效果圖
需求
輸入4位或6位短信驗(yàn)證碼，輸入完成后收起鍵盤
實(shí)現(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元素來(lái)模擬輸入框的顯示，沒(méi)有別的目的，就只是為了語(yǔ)義化，當(dāng)然你也可以使用其他任意一個(gè)元素來(lái)模擬，比如div。
使用label標(biāo)簽的好處在于它可以跟input的click事件關(guān)聯(lián)上，一方面實(shí)現(xiàn)了語(yǔ)義化解決方案，另一方面也省去了我們通過(guò)js來(lái)喚起虛擬鍵盤。
隱藏輸入框
.input-code {
position: absolute;
left: -9999px;
top: -99999px;
width: 0;
height: 0;
opacity: 0;
overflow: visible;
z-index: -1;
}
將真實(shí)的輸入框定位到屏幕可視區(qū)域以外的地方，虛擬鍵盤被喚起時(shí)，就不會(huì)將頁(yè)面往上頂了。所以你的驗(yàn)證碼輸入組件一定要放在虛擬鍵盤遮擋不了的地方。
第二步
處理驗(yàn)證碼輸入
handleSubmit() {
this.$emit('input', this.value)
},
handleInput(e) {
this.$refs.input.value = this.value
if (this.value.length >= this.number) {
this.hideKeyboard()
}
this.handleSubmit()
}
輸入時(shí)，給輸入框賦一次值，是為了解決android端上輸入框失焦后重新聚焦，輸入光標(biāo)會(huì)定在第一位的前面，經(jīng)過(guò)賦值再聚焦，光標(biāo)的位置就會(huì)顯示在最后一位后面。
第三步
完成輸入后關(guān)閉虛擬鍵盤
hideKeyboard() {
// 輸入完成隱藏鍵盤
document.activeElement.blur() // ios隱藏鍵盤
this.$refs.input.blur() // android隱藏鍵盤
}
組件完整代碼
<!--四位驗(yàn)證碼輸入框組件-->
<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實(shí)現(xiàn)驗(yàn)證碼輸入框組件，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue打包報(bào)錯(cuò):ERROR in static/js/xxx.js from U
這篇文章主要介紹了vue打包報(bào)錯(cuò):ERROR in static/js/xxx.js from UglifyJs undefined問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了element-ui如何防止重復(fù)提交的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue項(xiàng)目實(shí)現(xiàn)m3u8流媒體播放詳細(xì)圖文教程
m3u8是一種常用的視頻流媒體格式,通常用于在Web上播放視頻,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)m3u8流媒體播放的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樓層跳轉(zhuǎn)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
對(duì)類Vue的MVVM前端庫(kù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了對(duì)類Vue的MVVM前端庫(kù)的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
解決前后端分離 vue+springboot 跨域 session+cookie失效問(wèn)題
這篇文章主要介紹了前后端分離 vue+springboot 跨域 session+cookie失效問(wèn)題的解決方法，解決過(guò)程也很簡(jiǎn)單 ,需要的朋友可以參考下2019-05-05
vue項(xiàng)目中輪詢狀態(tài)更改方式(鉤子函數(shù))
這篇文章主要介紹了vue項(xiàng)目中輪詢狀態(tài)更改方式(鉤子函數(shù))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
今天被vue中proxy配置困擾了一天,記錄一下,下面這篇文章主要給大家介紹了關(guān)于Vue配置文件中的proxy配置方式的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
本文通過(guò)實(shí)例代碼給大家介紹了vue實(shí)現(xiàn)底部菜單功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-07-07
這篇文章主要介紹了vue?注釋template中組件的屬性說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04