Vue Input输入框自动获得焦点的有效方法

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

Vue Input输入框自动获得焦点的有效方法

落叶尘枫   2022-11-19 我要评论

效果:在点击Tab "Material Incoming"的时候,鼠标光标focus在PKG ID的input输入框关键代码是使用 this.$nextTick(()

        this.$nextTick(() => {
                this.$refs.pkgId.focus();
        })

注意:仅仅使用 this.$refs.pkgId.focus(); 是不起作用的,需要点击Tab Material Incoming 两次才有效,但这并不是初衷。即:

方法A:生效

    tabInitialClick(tab, event) {
      this.$nextTick(() => {
        this.$refs.pkgId.focus();
      })
    },

方法B:不生效

    tabInitialClick(tab, event) {
      this.$refs.pkgId.focus();
    },

另外,以下方法如下,使用autofocus=“true" 也不生效,原因网上资料说是因为<el-input> 外面还有其他组件 (我试了一个Form只有一个<el-input> 也没生产。不知道为什么。。。)

<el-col :span="8">
    <el-form-item label="PKG ID (S)" prop="pkgId" required>
          <el-input v-model=" IncomingMaterialForm.pkgId" ref="pkgId" autofocus="true" placeholder="Please input pkg id" clearable style="width: 300px;" />
    </el-form-item>
</el-col>

补充:vue input 获取焦点并选中

onRename(row) {
      this.$nextTick(() => {
        document.querySelector(`#a${row.id}`).focus()
        document.querySelector(`#a${row.id}`).select()
      })
    },

通过id获取焦点并选中

总结

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们