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 类型判断代码分析
Mar 28 Javascript
jQuery maxlength文本字数限制插件
Apr 16 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
jquery 模板的应用示例
Nov 12 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
Javascript中的解构赋值语法详解
Apr 02 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
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
javascript 函数式编程
2007/08/16 Javascript
javascript Demo模态窗口
2009/12/06 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
推荐下python/ironpython:从入门到精通
2007/10/02 Python
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
python代码区分大小写吗
2020/06/17 Python
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
销售高级职员求职信
2013/10/29 职场文书
数据管理员的自我评价分享
2013/11/15 职场文书
家长写给老师的建议书
2014/03/13 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
组织生活会发言材料
2014/12/15 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
Golang ort 中的sortInts 方法
2022/04/24 Golang
利用Python实时获取steam特惠游戏数据
2022/06/25 Python