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 相关文章推荐
jQuery解决iframe高度自适应代码
Dec 20 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
基于vue中的scoped坑点解说
Sep 04 Javascript
谈谈JavaScript中的函数
Sep 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
php 定界符格式引起的错误
2011/05/24 PHP
php一个找二层目录的小东东
2012/08/02 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
php截取中文字符串函数实例
2015/02/23 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
Python计算一个文件里字数的方法
2015/06/15 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
通过Python实现一个简单的html页面
2020/05/16 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
使用python实现学生信息管理系统
2021/02/25 Python
给导游的表扬信
2014/01/10 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
旅游安全协议书
2014/04/21 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
2014年车间工作总结
2014/11/21 职场文书
中国世界遗产导游词
2015/02/13 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
Pandas数据结构之Series的使用
2022/03/31 Python
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android