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 相关文章推荐
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
浅谈javascript的闭包
Jan 23 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 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
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
python实现邮件自动发送
2019/08/10 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
大学生毕业自我评价范文分享
2013/11/07 职场文书
党员创先争优心得体会
2014/09/11 职场文书
个人收入证明格式
2015/06/24 职场文书
七年级作文之冬景
2019/11/07 职场文书
python实现三次密码验证的示例
2021/04/29 Python
浅谈PHP7中的一些小技巧
2021/05/29 PHP
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS