脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue Input输入框自动获得焦点

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

 更新时间：2022年11月16日 11:26:35   作者：落叶尘枫  
我们有时候会遇到要输入框自动获取焦点的情况,下面这篇文章主要给大家介绍了关于Vue Input输入框自动获得焦点的简单方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

效果：在点击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获取焦点并选中

总结

到此这篇关于Vue Input输入框自动获得焦点的文章就介绍到这了,更多相关Vue Input输入框自动获得焦点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 深入了解Vue组件七种通信方式

    深入了解Vue组件七种通信方式

    vue组件通信的方式，这是在面试中一个非常高频的问题。其实Vue组件的通信方式除了props和 $emit还有很多，本文将对vue组件通信方式进行一下总结，感兴趣的可以学习一下
    2021-12-12
  • Iview Table组件中各种组件扩展的使用

    Iview Table组件中各种组件扩展的使用

    这篇文章主要介绍了Iview Table组件中各种组件扩展的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • vue3实现表格编辑和删除功能的示例代码

    vue3实现表格编辑和删除功能的示例代码

    这篇文章主要为大家详细介绍了vue3实现表格编辑和删除功能的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • Vue路由模式中的hash和history模式详细介绍

    Vue路由模式中的hash和history模式详细介绍

    VUE分为两种路由模式分别是hash（哈希）和history，他们的区别是hash模式不会包含在http请求中，并且不会重新加载页面，而使用history模式的话，如果前端的url和后端发起请求的url不一致的话，会报404错误，所以使用history模式的话我们需要和后端进行配合
    2022-09-09
  • 简单谈一谈Vue中render函数

    简单谈一谈Vue中render函数

    vue中的render函数,它返回的是一个虚拟节点vnode,也就是我们要渲染的节点,下面这篇文章主要给大家介绍了关于Vue中render函数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • 使用idea创建第一个Vue项目

    使用idea创建第一个Vue项目

    最近在学习vue，本文主要介绍了使用idea创建第一个Vue项目，文中根据图文介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue3 页面,菜单,路由的使用

    Vue3 页面,菜单,路由的使用

    这篇文章主要介绍了Vue3之 页面,菜单,路由的使用，文章围绕Vue3页面,菜单,路由相关资料展开详细内容,需要的朋友可以参考一下
    2021-11-11
  • vue如何动态修改$router参数

    vue如何动态修改$router参数

    这篇文章主要介绍了vue如何动态修改$router参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • Vue封装全局过滤器Filters的步骤

    Vue封装全局过滤器Filters的步骤

    这篇文章主要介绍了Vue封装全局过滤器Filters的步骤，通过封装vue全局过滤器实现filters的统一管理。感兴趣的朋友可以了解下
    2020-09-09
  • vue键盘事件keyup、keydown的作用

    vue键盘事件keyup、keydown的作用

    这篇文章主要介绍了vue键盘事件keyup、keydown的作用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12

最新评论