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 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
js图片轮播插件的封装
Jul 21 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
工作中常用js功能汇总
Nov 07 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
深入php多态的实现详解
2013/06/09 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
Python面试题集
2012/03/08 面试题
儿科护士实习自我鉴定
2013/10/17 职场文书
应届生程序员求职信
2013/11/05 职场文书
企业宣传标语
2014/06/09 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
新教师个人工作总结
2015/02/06 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书