vue实现输入框自动跳转功能


Posted in Javascript onMay 20, 2020

本文实例为大家分享了vue实现输入框自动跳转的具体代码,供大家参考,具体内容如下

<template>
 <div class="inputClass">
  <div v-for="(item,index) in list" :key="index">
   <input v-model="item.value" type="password" class="inputBorder"    @keyup="jumpNext($event,index,item.value)"
    @keydown="replaceValue(index)">
  </div>
 </div>
</template>

JS:

jumpNext(event, index, val) {
    if (!/[0-9]/.test(val)) {
     this.list[index].value = "";
     this.$message({
      type: 'warning',
      message: '该密码仅为数字'
     })
     return
    }
    let flag = document.getElementsByClassName("inputBorder"),
     currInput = flag[index],
     nextInput = flag[index + 1],
     lastInput = flag[index - 1];
    if (event.keyCode != 8) {
     if (index < (this.list.length - 1)) {
      nextInput.focus();
     } else {
      currInput.blur();
     }
    } else {
     if (index != 0) {
      lastInput.focus();
     }
    }
    if (index == 0) {
     this.num1 = event.key + ''
    } else if (index == 1) {
     this.num2 = event.key + ''
    } else if (index == 2) {
     this.num3 = event.key + ''
    } else if (index == 3) {
     this.num4 = event.key + ''
    } else if (index == 4) {
     this.num5 = event.key + ''
    } else if (index == 5) {
     this.num6 = event.key + ''
    }
    let str = this.num1 + this.num2 + this.num3 + this.num4 + this.num5 + this.num6
    if (str.length == 6) {
     let params = str
     setUpSVIP(params).then(res => {
      // this.superVipVisible = false
     }).catch(err => {
      // this.superVipVisible = false
      this.$message({
       type: 'error',
       message: '设置超级VIP失败'
      })
     })
    }
   },
   /*当键盘按下的时候清空原有的数*/
   replaceValue(index) {
    this.list[index].value = "";
   }

CSS:

.inputBorder {
  background: #ffffff;
  width: 50px;
  font-size: 50px;
  height: 50px;
  margin-left: 0px;
  margin-right: 0px;
  text-align: center;
  border: 1px solid #706969;
    }
.inputClass {
  margin-top: 31px;
  display: flex;
  justify-content: center;
}

vue实现输入框自动跳转功能

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

Javascript 相关文章推荐
浅谈javascript的原型继承
Jul 25 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
小程序组件之自定义顶部导航实例
Jun 12 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 #Javascript
精读《Vue3.0 Function API》
May 20 #Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 #Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 #Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 #Javascript
vue模块移动组件的实现示例
May 20 #Javascript
vue父子组件间引用之$parent、$children
May 20 #Javascript
You might like
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
destoon整合UCenter图文教程
2014/06/21 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
php获取根域名方法汇总
2014/10/28 PHP
Yii配置文件用法详解
2014/12/04 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
vue的toast弹窗组件实例详解
2018/05/14 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
Python3.8中使用f-strings调试
2019/05/22 Python
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
英国网上电器商店:Electricshop
2020/03/15 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
小学生自我评价范文
2014/01/25 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
2014年计生标语
2014/06/23 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书