内置组件rich-text在uni-app中点击后过了几百毫秒会使输入框失去焦点

内置组件rich-text在uni-app中点击后过了几百毫秒会使输入框失去焦点

开发环境 版本号 项目创建方式
Windows 11 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.65

手机系统：iOS

手机系统版本号：iOS 18

手机厂商：苹果

手机机型：iphone13

页面类型：nvue

vue版本：vue3

打包方式：云端

示例代码：
```swift
<rich-text nodes="11111" [@click](/user/click)="openInput"  />
<input ref="inputRef" />  
const inputRef = ref();
const openInput = () => {
  inputRef.value.focus();
}

渲染一个rich-text组件和一个输入框组件，点击rich-text，手动置焦输入框。

点击rich-text，手动置焦后，输入框能够唤起键盘并保持。

点击rich-text，手动置焦后，输入框成功唤起了键盘，但在几百毫秒后会自动失焦。

bug描述：
目前在做评论区的需求，因为有些评论需要特殊处理，使用了内置的rich-text组件渲染，现在有个问题是，我希望点击富文本区域的时候，唤起键盘和输入框，但实际使用下来，rich-text虽然可以响应点击事件，但是在点击事件几百毫秒以后，会触发莫名的副作用，导致已经手动focus的输入框（input/textarea）失焦。

更多关于内置组件rich-text在uni-app中点击后过了几百毫秒会使输入框失去焦点的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于内置组件rich-text在uni-app中点击后过了几百毫秒会使输入框失去焦点的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个在uni-app nvue环境下使用rich-text组件时遇到的焦点控制问题。根据你的描述，问题主要出现在iOS平台的nvue页面中。

问题分析：

  1. rich-text组件在nvue中的点击事件确实会触发focus操作
  2. 但随后会出现自动失焦的情况，这可能是iOS平台下nvue渲染引擎的特殊处理机制导致的

解决方案建议：

  1. 尝试使用setTimeout延迟focus操作：
const openInput = () => {
  setTimeout(() => {
    inputRef.value.focus();
  }, 300);
}
  1. 或者考虑使用uni-app的API来获取焦点：
const openInput = () => {
  uni.createSelectorQuery().select('#input').node(res => {
    res.node.focus();
  }).exec();
}
回到顶部