vue实现短信验证码输入框


Posted in Javascript onApril 17, 2020

本文实例为大家分享了vue实现短信验证码输入框的具体代码,供大家参考,具体内容如下

先上最终效果 (此处代码显示的是短信验证码框的效果   其余部分并未放上去)

vue实现短信验证码输入框

html

<div class="code">
  <input id="first" class="inputStyle" v-model="code[0]"
  style="border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;"
  type="text"/>
  <input id="second" class="inputStyle" v-model="code[1]"style="border-left:1px solid #c6c6c6;" type="text"/>
  <input id="third" class="inputStyle" v-model="code[2]"style="border-left:1px solid #c6c6c6;" type="text"/>
  <input id="forth" class="inputStyle" v-model="code[3]" style="border-left:1px solid #c6c6c6;" type="text"/>
  <input id="fifth"class="inputStyle" v-model="code[4]"
  style="border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-left:1px solid #c6c6c6;" 
  maxlength="1"
  type="text"/>
</div>

js

data (){
     return {    
       smsCode:'',
    code:new Array(5),
    codeId:['first','second','third','forth','fifth']
      }
   },
     watch:{
  code:function(newValue,oldValue){
   console.log('newValue.length'+newValue.length)
   let tempValue=''
   for(let i=0;i<newValue.length;i++){
   if(i==5){
    console.log(i)
    break
   }
   if(newValue[i]){
    tempValue=tempValue+newValue[i] 
   }
   }
   this.smsCode=tempValue
   console.log('smsCode '+this.smsCode)
   let m=tempValue.split("")
   let location=0
   for(let i=0;i<newValue.length;i++){
   if(m[i]&&i<5){
    location++
    newValue[i]=m[i]
   }else{
    newValue[i]=''
   }
   }
   // console.log(this.codeId[i])
   if(location<1){
   location=1
   }else if(location>5){
   location=5
   }
   document.getElementById(this.codeId[location-1]).focus()
  }
  },

CSS

.inputStyle{
 width:20%;
 height:100%;
 text-align:center;
 border:none;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
js 动态校验开始结束时间的实现代码
May 25 Javascript
JS监听组合按键思路及实现过程
Apr 17 #Javascript
javascript canvas检测小球碰撞
Apr 17 #Javascript
Vue实现浏览器打印功能的代码
Apr 17 #Javascript
基于JavaScript获取url参数2种方法
Apr 17 #Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 #Javascript
vue fetch中的.then()的正确使用方法
Apr 17 #Javascript
如何基于filter实现网站整体变灰功能
Apr 17 #Javascript
You might like
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
Python记录详细调用堆栈日志的方法
2015/05/05 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
Numpy之random函数使用学习
2019/01/29 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
JAVA代码查错题
2014/10/10 面试题
DTD的含义以及作用
2014/01/26 面试题
电子信息工程专业推荐信
2014/02/14 职场文书
安全协议书
2014/04/23 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
工作感想范文
2015/08/07 职场文书