element table 实现input输入框回车键跳入下一行，自动获取焦点

墨蓝 2022-09-10 07:18 445阅读 0赞

element table 实现input输入框回车键跳入下一行，自动获取焦点

![cb4ee2ba83caca7b1fafb605bd8851f8.png][]

使用动态绑定ref  this.$refs获取的是一个所有id组成的对象。

使用Object.keys(this.$refs) //遍历这个对象，返回的是一个包含所有id组成的一个数组，让当前的index+1获取到下一个input的id.

再根据这个id 使用this.$refs获取到这个input 使用focus

<template slot-scope="scope">
                    <el-input
                      class="year-leiji"
                      :ref='scope.row.id'
                      autocomplete="off"
                      v-model.number="scope.row.ljje"
                      @keydown.native="validateCounts(scope.row,scope.$index, $event)"
                    ></el-input>
                  </template>

validateCounts(row,index, e) {
          
          const val = e.target.value;
          var keyCode = e.keyCode || e.which || e.charCode;
          if(keyCode=== 13) {
            this.submitYearLeiJi(row.id, val)
            this.$refs[row.id].blur()
            if(Object.keys(this.$refs).length-1 === index) {
                index = -1
            }
            this.$refs[Object.keys(this.$refs)[index + 1]].focus();
          }
        }

[cb4ee2ba83caca7b1fafb605bd8851f8.png]: /images/20220829/eba73e3583454d829ee6631c5a2d314a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，445人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp弹框uni-popup中input自动获取焦点实现

<uni-popup :show="showPopupBottom" :type="popType" @hidePopup="hidePo

港控/mmm°/ 2023年08月17日 15:54/ 0 赞/ 136 阅读

相关 element input 自适应_vue自定义指令实现element中input 自动获取焦点

项目的一个需求，记录分享一下，希望帮助别人少踩坑。先简单说一下需求：左侧是tree结构，右侧是表单，实现功能就是点击tree节点，对应的右侧input获取焦点 ![Image

不念不忘少年蓝@/ 2022年12月31日 15:27/ 0 赞/ 228 阅读

相关 Element el-input 输入框详解

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 用途 2. 输入框 2.1 输入框基本功能 2.2 显

待我称王封你为后i/ 2022年10月26日 12:51/ 0 赞/ 747 阅读

相关输入文本框，焦点自动跳转下一个文本框

![Center][] $(".yhjuan").keydown(function(event)\{ var num=event.keyCode;

绝地灬酷狼/ 2022年09月21日 11:38/ 0 赞/ 182 阅读

相关 element table 实现input输入框回车键跳入下一行，自动获取焦点

element table 实现input输入框回车键跳入下一行，自动获取焦点 ![cb4ee2ba83caca7b1fafb605bd8851f8.png][] 使用动态

墨蓝/ 2022年09月10日 07:18/ 0 赞/ 446 阅读

相关 vue通过自定义指令使input输入框自动获取焦点

在部分开发场景中我们需要input输入框自动获取焦点我们可以通过以下代码实现使用自定义指令 v-focus <template> <el

我就是我/ 2022年08月28日 12:44/ 0 赞/ 198 阅读

相关 JS实现回车键切换到下一个输入框

进入正题之前，首先说明一下这里的情况。因为我的input输入框全部都是使用JS代码动态生成的，也就是说我在页面里面点击一次按钮就会生成几个输入框。所以我使用了JQuer

深碍√TFBOYSˉ_/ 2022年05月14日 09:13/ 0 赞/ 432 阅读

相关 vue input自动获取焦点

方法一这个方法适合vue插件，id比较好绑定 // html 部分 <input type="text" id="name">

逃离我推掉我的手/ 2022年03月16日 14:54/ 0 赞/ 387 阅读

相关 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug

DOM的滚动 DOM规范中并没有规定各浏览器需要实现怎样的滚动页面区域，各浏览器实现了相应的方法，可以使用不同的方式控制页面区域的滚动。这些方法作为HTMLElement类型

我不是女神ヾ/ 2021年11月05日 10:00/ 0 赞/ 387 阅读

相关 Vue中input文本输入框自动获得鼠标焦点

this.$nextTick(_ => { this.$refs.saveTagInput.$refs.input.focus() }) saveT

Love The Way You Lie/ 2021年07月25日 18:19/ 0 赞/ 951 阅读