Vue如何实现验证码输入交互


Posted in Vue.js onDecember 07, 2020

最近做一个H5的页面,里面有个输入验证码交互,就是移动端比较常见的那种验证码输入交互。就是那种,对,就是那种,一个数字一个下划线,移动端非常常见的那种验证码交互。实现过程中主要参考了美团外卖安卓端的具体交互。

应用到项目中的效果如下。

一般操作:

Vue如何实现验证码输入交互

粘贴效果:

Vue如何实现验证码输入交互

方案选择

方案1:调整文字的间距
设置 input 的 letter-spacing 属性,我们就可以让验证码之间有足够大的空隙,然后再把底线改为有间隔的多个线段貌似就可以了。

然而,这里会有一个问题。就是光标总是会在数字的左边,而我们希望的是输入后的数字的中心位于原来光标的位置。最终我放弃了这个方案。

显然,这个方案并不合适。

方案2:使用多个 input
这就是我使用的方式,也是接下来我要详细讲解的方案。主要原理是:使用多个 input 元素,每个 input 只能输入一个数字。当通过 input 事件监测到字符输入时,自动将焦点对焦到下一个 input 元素。

当然我们还要实现点击任何一个输入框时,将焦点移动到第一个value为空的input上。另外,点击退格键时,也要进行焦点的改变。

测试后后发现,焦点的移动,不会导致移动端键盘的收起。最终我就决定使用这个方案了。

代码实现
在线示例:https://codepen.io/F-star/pen/dyyeZaN

HTML:

<div id="app">
 <div class="captcha">
  <input v-for="(c, index) in ct" :key="index"
   type="number" v-model="ct[index]" ref="input" 
   :style="{borderBottomColor: index <= cIndex ? '#333' : ''}"
   @input="e => {onInput(e.target.value, index)}" 
   @keydown.delete="e=>{onKeydown(e.target.value, index)}"
   @focus="onFocus"
   :disabled="loading"
   >
 </div>
 <p>{{msg}}</p>
</div>

CSS:

.captcha {
 display: flex;
 justify-content: center;
 margin-top: 40px;
}
input {
 margin-right: 20px;
 width: 45px;
 text-align: center;
 border: none;
 border-bottom: 1px solid #eee;
 font-size: 24px;
 outline: none;
}
input:last-of-type {
 margin-right: 0;
}
input:disabled {
 color: #000;
 background-color: #fff;
}
.msg {
 text-align: center;
}

JS:

var Main = {
 data() {
  return {
   ct: ['', '', '', '', '', ''],
   loading: false,
   msg: '',
  }
 },
 computed: {
  ctSize() {
   return this.ct.length;
  },
  cIndex() {
   let i = this.ct.findIndex(item => item === '');
   i = (i + this.ctSize) % this.ctSize;
   return i;
  },
  lastCode() {
   return this.ct[this.ctSize - 1];
  }
 },
 watch: {
  cIndex() {
   this.resetCaret();
  },
  lastCode(val) {
   if (val) {
    console.log('this.ctSize', this.ctSize)
    this.$refs.input[this.ctSize - 1].blur();
    this.sendCaptcha();
   }
  }
 },
 mounted() {
  this.resetCaret();
 },
 methods: {
  onInput(val, index) {
   this.msg = ''
   val = val.replace(/\s/g, '');
   if (index == this.ctSize - 1) {
    this.ct[this.ctSize - 1] = val[0];  // 最后一个码,只允许输入一个字符。
   } else if(val.length > 1) {
    let i = index;
    for (i = index; i < this.ctSize && i - index < val.length; i++) {
     this.ct[i] = val[i];
    }
    this.resetCaret();
   }
  },
  // 重置光标位置。
  resetCaret() {
   this.$refs.input[this.ctSize-1].focus();
  },
  onFocus() {
   // 监听 focus 事件,将光标重定位到“第一个空白符的位置”。
   let index = this.ct.findIndex(item => item === '');
   index = (index + this.ctSize) % this.ctSize;
   console.log(this.$refs.input)
   this.$refs.input[index].focus();
  },
  onKeydown(val, index) {
   if (val === '') {
    // 删除上一个input里的值,并对其focus。
    if (index > 0) {
     this.ct[index - 1] = '';
     this.$refs.input[index - 1].focus();
    }
   }
  },
  sendCaptcha() {
   console.log();
   this.msg = `发送验证码到服务器:${this.ct.join('')}`;
   // 此时无法操作 input。。
   this.loading = true;
   setTimeout(() => {
    this.msg = ('验证码错误')
    this.loading = false;
    this.$nextTick(() => {
     this.reset();
    })
   }, 3000)
  },

  reset() {
   // 重置。一般是验证码错误时触发。
   this.ct = this.ct.map(item => '');
   this.resetCaret();
  }
 }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

原理

创建多个 input 元素,对这些 input 都绑定 focus 事件。一旦触发该事件,我们会把焦点移动到从左往右第一个 value 为空字符的 input 上。所以在初始状态时,点击最右边的 input,光标还是会跑到最左边的 input。

然后我们给这些 input 绑定 input 事件,监听输入字符。当输入后的字符不为空字符,我们会和 focus 事件一样,重定位下一个需要聚焦的 input。如果输入的是多个字符(一般是是粘贴的缘故),就会把多出来的字符一个一个按顺序填入到后面的 input 中,然后才重定位光标。这样,我们就实现了一个个输入数字和粘贴短信验证码(一次性输入多个数字)的交互。

最后我们还要处理退格行为,需要给所有 input 绑定 keydown 事件。当按下的为退格键,且当前 input 的 value 为空时,清空上一个 input 里的数据,并聚焦到上一个 input 上。

对了,验证码输入错误后,需要清除所有 input 的数据,并把焦点移动到第一个 input 上。

总结
原理并不复,只是实现起来有点繁琐。

我这个方案没有进行浏览器兼容,请大家在经过充分的测试后再行使用。

如果可以的话,我还是推荐简单的一个输入框方案,而不是选择这种花里胡哨的交互。简单稳妥的实现维护简单,也不会有太多意想不到的状况。因为验证码输入这里如果在某些浏览器上无法正确操作,对转化率还是有很大影响的。

以上就是Vue如何实现验证码输入交互的详细内容,更多关于vue 验证码输入交互的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue单元格多列合并的实现
Nov 26 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 #Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 #Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 #Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 #Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 #Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 #Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 #Vue.js
You might like
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
django之常用命令详解
2016/06/30 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
关于python多重赋值的小问题
2019/04/17 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
pytorch标签转onehot形式实例
2020/01/02 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
工程师自我评价怎么写
2013/09/19 职场文书
建筑设计所实习生自我鉴定
2013/09/25 职场文书
医学检验专业大学生求职信
2013/11/18 职场文书
信访工作经验交流材料
2014/05/23 职场文书
优秀班集体申报材料
2014/12/25 职场文书