vue实现验证码输入

需求：这种样式的验证码输入，进入页面时光标停留在第一个格子，随着输入的数字向后移动。
实现逻辑：
①首先考虑样式，将六个格子及获取光标的样式写出来。
②需要一个input框作为输入，所以在页面上加input框，并且隐藏。
③进入页面时获取input的焦点，并监听input的值，输入一个值页面格子的光标向后移。input内容删除时光标向前。根据下标给样式。
逻辑差不多这样，可以自己尝试写一下！
实现代码： css没有放根据各自的需求改哈

         html部分<view class="list" ref="list"><input type="number" auto-focus :focus="focus" @input="setOldPass" class="input" @focus="onFocus"v-model.trim="oldPassword" /><view v-for="(item,index) in oldPassArr" :key="index" :class="[index==inx?'color':'','lists'] ">{{item}}</view></view>js部分export default {data() {return {oldPassArr: ['', '', '', '', '', ''],oldPassword: '',inx: 0,focus: false,}},mounted() {this.focus = true},methods: {setOldPass(e) {this.value = e.detail.value;let n = e.detail.value.split('');let that = thisthis.oldPassword = this.oldPassword.slice(0, 6)if (n) {let i;for (i = 0; i < 6; i++) {if (n[i]) {this.oldPassArr[i] = n[i]} else {this.oldPassArr[i] = ''}}this.inx = n.lengthif (n.length == 6) {this.focus = falsereturn;}} else {}},onFocus() {this.inx = this.oldPassword.length},}

vue实现验证码输入相关推荐

Vue - 实现验证码输入组件
效果图功能分解输入效果自动换焦如何删除接收paste事件数据先行确定验证码位数 amout 储存验证码的数组 code 当前输入项的索引 currentIndex 布局 <temp ...
基于 vue 的验证码组件
登录页面有个验证码,暂时没用到后台,在网上找了两个博客,记录一下. 一.直接写(参考-UIEngineer) 这个样式比较简单,直接在需要验证码的地方添加就行了.如果这个页面比较复杂,用组件会比较好. ...
input输入框模拟验证码输入效果
今天看到一个帖子,说到用input输入框模拟滴滴.摩拜等app验证码输入效果,提到了一个方案: 1.利用input来获得焦点,自动调用手机的数字键盘 2.实际将输入框用透明度隐藏 3.用label的f ...
Vue 图形验证码实现详解
其实绘制图形二维码就是使用进行图形绘制 canvas 绘制图形 1.获取元素dom 访问绘图上下文 <canvas id="tutorial" width="15 ...
基于 Vue2.0 的移动端 / PC 端验证码输入组件.
vue-input-code 基于Vue2.0的移动端验证码输入组件. 功能预览输入回调完成回调自定义验证码个数样式可控这里是可爱的Demo 支持支持 Vue.js 2.0+. 安装和使用 ...
自动跳格的验证码输入
最近做小程序,其中有一个短信验证码的填写页面,是那种输入数字,就自动跳到下一格的,可以看下动图演示点击横线区域,弹出键盘,然后依次输入数字,可自动跳到下一格,输入完成后,下方确定按钮自动变为可点击 ...
Python+tkinter模拟京东旋转图片式验证码输入
好消息:"Python小屋"编程比赛正式开始推荐图书: <Python程序设计(第3版)>,(ISBN:978-7-302-55083-9),董付国,清华大学出版社, ...
vue实现input输入模糊查询(三种方式)
vue实现input输入模糊查询(三种方式) 目录 vue实现input输入模糊查询(三种方式) 1 计算属性实现模糊查询演示: 2 watch 监听实现模糊查询 3 通过按钮点击实现模糊查询演示 ...
解决工行登录失败:[96111945]验证码输入错误或已经超时失效,请重新输入
今天,我使用公司的笔记本登录工行网站,总遇到这样一个问题:[96111945]验证码输入错误或已经超时失效,请重新输入. 我使用的是360浏览器,起初我怀疑是版本不新,好长时间没有升级了.我升级了一下 ...

vue实现验证码输入

vue实现验证码输入相关推荐

最新文章

热门文章