Vue：如何将焦点设置在输入字段上

Posted 2023-02-23

【中文标题】Vue：如何将焦点设置在输入字段上

【英文标题】：Vue: how to set the focus on an input field

【发布时间】：2021-03-18 20:14:23

【问题描述】：

当我加载页面时，我希望焦点转到输入字段

  <b-form-input
    placeholder="Name *"
    name="name"
    autofocus
  ></b-form-input>

但它不起作用

我该怎么办？

【问题讨论】：

查看***.com/questions/54306581/…

【参考方案1】：

当我将您的代码插入 html 文件时，它什么也没做，什么也没显示。只需删除b-form- 它就可以工作，并且当我在没有我这样做的情况下加载页面时它也能集中注意力。所以我想这行得通，有点。但是我不太了解 vue，所以我希望这不是大错特错，b-form 完全没问题，在这种情况下我很抱歉。

【讨论】：

我试图删除 b-form- 就像你告诉我的那样，但它不起作用。 b-form- 我把它放出来是因为我使用的是 boostrap vue

好吧，对不起，我对vue了解不多。但只是在一个空的 .html 中使用 <input placeholder="Name *" name="name" autofocus></input> 就可以了。

【参考方案2】：

给输入添加一个引用：

  <b-form-input
    placeholder="Name *"
    name="name"
    autofocus
    ref="nameRef"
  ></b-form-input>

然后在挂载的钩子中：

mounted()
  this.$refs.nameRef.focus()

【讨论】：

我按照你说的尝试了，将 ref 插入到 input 中，然后将 recall 插入到 mount 中，但它不起作用