uni-app内置组件editor在初始输入内容后移除焦点@blur事件获取不到输入的内容线上小程序今年没有更新过一直都正常使用这两天出现的这个问题

uni-app内置组件editor在初始输入内容后移除焦点@blur事件获取不到输入的内容线上小程序今年没有更新过一直都正常使用这两天出现的这个问题

| 开发环境       | 版本号 | 项目创建方式 |
|----------------|--------|--------------|
| Windows        | 24H2   | HBuilderX    |

产品分类：  
uniapp/小程序/微信  

操作步骤：  
如题  

预期结果：  
如题  

实际结果：  
如题  

bug描述：  
如题  

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20250617/15ea4dd2b16e273a55b9eefef0ac37f8.png)

更多关于uni-app内置组件editor在初始输入内容后移除焦点@blur事件获取不到输入的内容线上小程序今年没有更新过一直都正常使用这两天出现的这个问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

我使用 4.71.2025061206-alpha 版本的 hx，测试以下代码未复现你说的问题，你可以升级hx看看还有没有这个问题，有的话麻烦发下可复现demo。
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<editor id=“editor” class=“ql-container” placeholder=“开始输入…” show-img-size show-img-toolbar show-img-resize
@blur=“handleBlur”>
</editor>
</view>
</template>

<script> export default { data() { return { title: 'Hello' } }, methods: { handleBlur(e) { console.log(e.detail, 'detail') } } } </script>

更多关于uni-app内置组件editor在初始输入内容后移除焦点@blur事件获取不到输入的内容线上小程序今年没有更新过一直都正常使用这两天出现的这个问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


升级了hx到4.71.2025061206-alpha 版本，新建了一个默认模板项目，复制了上面的editor部分代码，点击运行 ==> 运行到小程序模拟器 ==> 微信开发者工具。在微信开发者工具中测试handleBlur事件获取不到输入的内容，具体打印内容看问答补充的截图，打印出来的html和text都只有换行符，没有输入的内容

回复 i***@outlook.com: 你试下原生微信小程序有没有这个问题

回复 DCloud_UNI_JBB: 原生小程序也有这个问题

回复 i***@outlook.com: 可以反馈到微信社区

这是一个已知的微信小程序基础库更新导致的兼容性问题。微信最近更新了基础库，影响了editor组件的blur事件触发机制。

问题分析：

  1. 在微信小程序最新基础库中，editor组件在失去焦点时，blur事件触发时机可能早于内容更新
  2. 导致通过@blur获取的内容可能是未更新的旧值

临时解决方案：

  1. 改用定时器延迟获取内容：
handleBlur() {
  setTimeout(() => {
    this.editorCtx.getContents({
      success: res => {
        console.log(res.html)
      }
    })
  }, 300)
}
  1. 或者监听input事件替代blur事件：
<editor [@input](/user/input)="handleInput"></editor>

handleInput() {
  this.editorCtx.getContents({
    success: res => {
      console.log(res.html)
    }
  })
}
回到顶部