vue实现验证码输入框组件
更新时间：2017年12月14日 16:25:09 作者：liusong
最近做项目遇到这样的需求要求输入4位或6位短信验证码，输入完成后收起键盘。实现步骤大家参考下本文
先来看波完成效果图
需求
输入4位或6位短信验证码，输入完成后收起键盘
实现步骤
第一步
布局排版
<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实现验证码输入框组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本文主要介绍了vue-element-admin配置小结，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
随着Vue3的日益成熟,越来越多的团队开始考虑将现有Vue2项目升级到Vue3,作为一次重大版本更新,Vue3在带来性能提升和新特性的同时,也引入了一些不兼容的变化,本文将全面解析Vue2到Vue3升级过程中需要注意的关键点,帮助你顺利完成迁移,需要的朋友可以参考下2025-04-04
在日常开发中,为用户提供复制文本功能的需求比较常见,下面介绍一款vue3可用的插件,可以快速实现这个功能,感兴趣的可以了解一下2023-11-11
这篇文章主要介绍了antd table按表格里的日期去排序操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
本文分享如何在Vue 3中实现一个简单的歌词滚动效果,我将从歌词数据的处理开始,一步步介绍布局的搭建和事件的实现,感兴趣的朋友跟随小编一起看看吧2024-02-02
这篇文章主要介绍了Vue el-upload单图片上传功能实现,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
这篇文章主要为大家介绍了Vue.js3.2响应式部分的优化升级详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了iview实现select tree树形下拉框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
这篇文章主要介绍了vue中使用带隐藏文本信息的图片、图片水印的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了vue高级特性的相关知识，文中介绍非常细致，帮助大家更好的参考和学习，感兴趣的朋友可以了解下2020-06-06
最新评论