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 相关文章推荐
你可能不再需要JQUERY
Mar 09 Javascript
js活用事件触发对象动作
Aug 10 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
angularjs路由传值$routeParams详解
Sep 05 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 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获取当前页面完整URL的实现代码
2013/06/10 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
海量经典的jQuery插件集合
2010/01/12 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
发布你的Python模块详解
2016/09/15 Python
python numpy格式化打印的实例
2018/05/14 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
html5清空画布方法(三种)
2017/10/16 HTML / CSS
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
银行员工犯错检讨书
2014/09/16 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
放牛班的春天观后感
2015/06/01 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers