需求
实现步骤
第⼀步
布局排版
<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事件关联上，⼀⽅⾯实现了语义化解决⽅案，另⼀⽅⾯也省去了我们通过js来唤起虚拟键盘。
隐藏输⼊框
.input-code {
position: absolute;
left: -9999px;
top: -99999px;
width: 0;
height: 0;
opacity: 0;
overflow: visible;
z-index: -1;
}
将真实的输⼊框定位到屏幕可视区域以外的地⽅，虚拟键盘被唤起时，就不会将页⾯往上顶了。所以你的验证码输⼊组件⼀定要放在虚拟键盘遮挡不了的地⽅。
第⼆步
处理验证码输⼊
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端上输⼊框失焦后重新聚焦，输⼊光标会定在第⼀位的前⾯，经过赋值再聚焦，光标的位置就会显⽰在最后⼀位后⾯。
第三步
完成输⼊后关闭虚拟键盘
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>
总结视频直播技术方案
以上所述是⼩编给⼤家介绍的vue实现验证码输⼊框组件，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议