uniapp textarea组件自动失焦？

Question

uniapp textarea组件 第一次点击聚焦以后会自动失焦，导致键盘抬起又自动缩回去了

有人遇见过吗？

Answer 1

这个问题在uniapp中确实比较常见，尤其是在安卓设备上。以下是几种可能的解决方案：

1.使用 keyboard-accessory 组件： 在 textarea 组件中添加 keyboard-accessory 组件，可以有效避免第一次聚焦失焦的问题。示例如下：
HTML代码
<textarea fixed maxlength="300" auto-height="true" :show-confirm-bar="false" @focus="onFocus" @blur="onBlur" v-model="commentText">
<keyboard-accessory style="height: 1px;">

<cover-view style="background: transparent;"></cover-view>

</keyboard-accessory>
</textarea>

2. 延时聚焦： 在 mounted 或 created 生命周期钩子中，使用 setTimeout 延时聚焦，可以避免键盘弹出后立即失焦的问题：
   JavaScript代码

mounted() {
setTimeout(() => {

this.$refs.textarea.focus();

}, 100);
}

3. 监听点击事件： 避免使用 focus 和 blur 事件，改用点击事件来控制键盘的显示和隐藏：
   HTML代码

<div @click="showKeyboard">
<textarea ref="textarea" v-model="commentText"></textarea>
</div>

JavaScript代码

methods: {
showKeyboard() {

this.$refs.textarea.focus();

}
}

这些方法可以帮助你解决 textarea 组件第一次聚焦失焦的问题。你可以根据具体情况选择最适合的方案进行尝试。