单击按钮后将注意力集中在文本区域答案

【问题标题】：Keep focus on textarea after button click单击按钮后将注意力集中在文本区域
【发布时间】：2020-08-31 12:24:13
【问题描述】：

请建议在单击特定按钮后如何保持对 textarea 元素的关注。对于我的移动应用，我使用基于 Quasar vue 的框架。

尝试应用 preventDefault

<q-btn @click.prevent="handleClick" label="click me" />

并停止传播

 <q-btn @click.stop="handleClick" label="click me" />

但无论如何 textarea 在按钮单击后失去焦点。

更新：强制焦点的解决方法会导致移动设备上的副作用，例如闪烁的嵌入式键盘。这就是为什么我正在寻找具有永久焦点的选项。

UPD2：如果我使用简单的 div 作为按钮和 mousedown 事件而不是单击，它工作得很好

【问题讨论】：

【解决方案1】：

正如Polywhirl先生在cmets中提到的那样，那是因为单击后，按钮具有焦点。将焦点返回到输入的一种方法是这样的：

在您的输入中添加ref 属性：

ref="myInput"

所以你的input 变成：

<q-input
  ref="myInput"
  v-model="text"
  filled
  type="textarea"
>
</q-input>

然后在handleClick方法中添加这一行：

this.$refs.myInput.focus();

【讨论】：

【解决方案2】：

问题作者留下了更新“如果我使用简单的 div 作为按钮和 mousedown 事件而不是单击，它就可以正常工作”。事实上，使用按钮元素就可以达到想要的效果。这里阻止了mousedown 事件，以防止焦点从文本区域丢失，同时正常调用单击处理程序：

<q-btn @mousedown.prevent @click="handleClick" label="click me"></q-btn>

这可以在this forked codepen 中看到。（第二个按钮具有上述修复。）

【讨论】：