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 应用类库代码
Jun 02 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 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 错误之引号中使用变量
2009/05/04 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python操作gmail实例
2015/01/14 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
Python中如何获取类属性的列表
2016/12/26 Python
利用python实现数据分析
2017/01/11 Python
Python正则表达式指南 推荐
2018/10/09 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
大学生个人先进事迹材料范文
2014/05/03 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
docker-compose部署Yapi的方法
2022/04/08 Servers