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 纯数字不重复排列的另类方法
Jul 17 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 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+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
source.php查看源文件
2006/12/09 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
Python自动登录126邮箱的方法
2015/07/10 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
家具厂厂长岗位职责
2014/01/01 职场文书
报关报检委托书
2014/04/08 职场文书
物业保安辞职信
2015/05/12 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
nginx共享内存的机制详解
2022/03/21 Servers