vue实现验证码输入框组件


Posted in Javascript onDecember 14, 2017

先来看波完成效果图

vue实现验证码输入框组件 

需求

输入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实现验证码输入框组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
js 异步处理进度条
Apr 01 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
Vue使用轮询定时发送请求代码
Aug 10 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
基于滚动条位置判断的简单实例
Dec 14 #Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 #Javascript
ES6/JavaScript使用技巧分享
Dec 14 #Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 #Javascript
浅析JS抽象工厂模式
Dec 14 #Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 #Javascript
利用Javascript开发一个二维周视图日历
Dec 14 #Javascript
You might like
php分页函数
2006/07/08 PHP
pw的一个放后门的方法分析
2007/10/08 PHP
用PHP读取和编写XML DOM的实现代码
2011/02/03 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
json的使用小结
2016/06/08 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
施工人员岗位职责
2013/12/12 职场文书
大学生求职信范文应怎么写
2014/01/01 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
环保志愿者活动方案
2014/08/14 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
超市店长竞聘书
2015/09/15 职场文书