uniapp textarea组件自动失焦?

新手上路,请多包涵

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

有人遇见过吗?

阅读 1.1k
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>

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

mounted() {
setTimeout(() => {

this.$refs.textarea.focus();

}, 100);
}

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

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

JavaScript代码

methods: {
showKeyboard() {

this.$refs.textarea.focus();

}
}

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏