问题描述
在单击特定按钮后,请建议如何保持对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事件而不是单击,则效果很好
解决方法
正如Polywhirl先生在评论中提到的那样,这是因为单击后按钮具有焦点。将焦点返回输入的一种方法是这样的:
在输入中添加ref
属性
ref="myInput"
因此您的input
变为:
<q-input
ref="myInput"
v-model="text"
filled
type="textarea"
>
</q-input>
然后在handleClick
方法中添加以下行:
this.$refs.myInput.focus();