web建站教程

  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. php入门
    nodejs
    mockjs
    mysql
    织梦cms
    帝国cms
    git教程

当前位置: 建站教程 > vuejs >

vuejs实现输入完input自动跳到下一个input

199 ℃

下面web建站教程为大家介绍一下vuejs实现输入完input自动跳到下一个input

功能需求:做一个身份证后四位输入或汽车牌照输入,每个数字/字母一个input,想输入完当前的input后自动跳到下一个input,删除当前input后自动跳到前一个。

1、template代码

<div v-for="(item, index) in inputList" :key="index">
  <input
    type="text"
    v-model="item.val"
    class="inputValue"
    @keyup="inputNextFocus($event, index)"
    @keydown="cancelValue(index)"
  />
</div>
//注意:inputValue

2、script代码

data() {
  return {
    inputList: [{ val: "" }, { val: "" }, { val: "" }, { val: "" }], //根据个数
  }
}
methods: {
  inputNextFocus(el, index) {
    var dom = document.getElementsByClassName("inputValue"), //引入inputValue
      currInput = dom[index],
      nextInput = dom[index + 1],
      lastInput = dom[index - 1];
    if (el.keyCode != 8) {
      if (index < this.inputList.length - 1) {
        nextInput.focus();
      } else {
        currInput.blur();
      }
    } else {
      if (index != 0) {
        lastInput.focus();
      }
    }
  },
  cancelValue(index) {
    this.inputList[index].val = "";
  }
}

vuejs单元测试运行npm run unit报错解决方法

vuejs实现部分页面跳转后禁止返回到前一个页面

vuejs前进刷新,后退缓存功能介绍

vuejs项目兼容ie浏览器

上面是“vuejs实现输入完input自动跳到下一个input”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_2177.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

vuejs安装插件报错Unexpected end of JSON input while parsing near..

1、清除缓存

npm cache clean --force

2、重新安装

npm install

3、安装刚才报错的插件

点击阅读全文
上一篇:vuejs将网页中指定div转成pdf并下载
下一篇:vuejs通过input实现表格/列表模糊搜索代码分析