javascript - 单击按钮后将焦点保持在文本区域上

Question

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

尝试应用preventDefault

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

并停止传播

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

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

代码笔:https://codepen.io/olegef/pen/NWNvxJM

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

更新2: 如果我使用简单的 div 作为按钮和 mousedown 事件而不是单击，它就可以正常工作

Answer 1

正如Polywhirl先生在评论中提到的，那是因为点击后，按钮获得了焦点。将焦点返回到输入的一种方法如下:

将 ref 属性添加到您的输入:

ref="myInput"

因此您的输入变为:

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

然后在 handleClick 方法中添加以下行:

this.$refs.myInput.focus();