单击按钮后继续关注文本区域

Question

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

试图应用preventDefault

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

和stopPropagation

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

但是在任何情况下，单击按钮后文本区域都会失去焦点。

Codepen：https://codepen.io/olegef/pen/NWNvxJM

UPD： 强制聚焦的解决方法会对移动设备产生副作用，例如嵌入式键盘闪烁。这就是为什么我要寻找永久关注的选择。

UPD2： 如果我将简单的div用作按钮和mousedown事件而不是单击，则效果很好

Answer 1

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

在输入中添加ref属性

ref="myInput"

因此您的input变为：

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

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

this.$refs.myInput.focus();