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 相关文章推荐
JS隐藏参数post传值实例
Apr 18 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
Js面试算法详解
Apr 08 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
基于vue中的scoped坑点解说
Sep 04 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
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
PHP实现简易计算器功能
2020/08/28 PHP
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
Python中的下划线详解
2015/06/24 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
python 导入数据及作图的实现
2019/12/03 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
详解python中的闭包
2020/09/07 Python
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
公司门卫的岗位职责
2014/02/19 职场文书
临床护理求职信
2014/04/26 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
高三语文教学反思
2016/02/16 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB
python三子棋游戏
2022/05/04 Python
移除Selenium中window.navigator.webdriver值
2022/06/10 Python