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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
AutoSave/自动存储功能实现
Mar 24 Javascript
jquery tools之tooltip
Jul 25 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
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 过滤页面中的BOM(实现代码)
2013/06/29 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
Python最长公共子串算法实例
2015/03/07 Python
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
英国著名书店:Foyles
2018/12/01 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
会计专业个人求职信范文
2014/01/08 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
代办社保委托书范文
2014/10/06 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
创业计划书之网吧
2019/10/10 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis