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写法
Sep 15 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
JS解析XML实例分析
Jan 30 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
Dec 01 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
JavaScript 去重和重复次数统计
Mar 31 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获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
Python使用Supervisor来管理进程的方法
2015/05/28 Python
Python常用库推荐
2016/12/04 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
python读取文件名称生成list的方法
2018/04/27 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
python算的上脚本语言吗
2020/06/22 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
自我介绍演讲稿
2014/01/15 职场文书
简历上的自我评价
2014/02/03 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
2014年家长学校工作总结
2014/11/20 职场文书