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 相关文章推荐
Javascript变量函数浅析
Sep 02 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
js编写三级联动简单案例
Dec 21 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
基于滚动条位置判断的简单实例
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版交通银行网银支付接口开发入门教程
2016/09/26 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
js 通用javascript函数库整理
2011/08/14 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
浅析Django中关于session的使用
2019/12/30 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
没编程基础可以学python吗
2020/06/17 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
幼儿园门卫岗位职责
2014/02/14 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
《秋游》教学反思
2014/04/24 职场文书
高一军训的心得体会
2014/09/01 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
2015年国培研修感言
2015/08/01 职场文书
团支部书记竞选稿
2015/11/21 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
Vue的生命周期一起来看看
2022/02/24 Vue.js
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python
Spring 使用注解开发
2022/05/20 Java/Android