HarmonyOS鸿蒙Next中在web组件中拖拽选中文本，如何获取拖拽结束之后选中的文本内容

HarmonyOS鸿蒙Next中在web组件中拖拽选中文本，如何获取拖拽结束之后选中的文本内容 在web组件中拖拽选中文本，如何获取拖拽结束之后选中的文本内容

6 回复

小伙伴你好，看看这个链接是否能帮到你

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web_menu#web菜单获取选中文本

更多关于HarmonyOS鸿蒙Next中在web组件中拖拽选中文本，如何获取拖拽结束之后选中的文本内容的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


菜单我用的是js的并不是原生的，

什么意思，我看代码就是用js获取到选择的文字然后传到应用侧的，

目前我想要的效果是，webview内已有选区（选中文本）的情况下，再针对选区进行修改（拖拽选区），当修改完选区抬手的那一刻我需要个回调，而不是选区一修改就回调。

在HarmonyOS Next中，可通过Web组件的事件监听获取拖拽选中的文本内容。使用onSelectionChange事件监听文本选择变化，通过getSelection()方法获取选中的文本。示例代码：

webView.on('selectionChange', () => {
  const selection = webView.getSelection();
  console.log('选中文本: ' + selection);
});

该方法直接返回用户拖拽操作后选中的文本字符串。

在HarmonyOS Next的Web组件中，可以通过JavaScript的Selection API获取拖拽结束后选中的文本内容。具体实现如下：

  1. 在Web组件中注册selectionchange事件监听：
// 在页面脚本中添加
document.addEventListener('selectionchange', () => {
    const selection = window.getSelection();
    const selectedText = selection.toString().trim();
    
    if (selectedText.length > 0) {
        // 处理选中文本
        console.log('选中文本:', selectedText);
        // 可通过与ArkTS侧通信传递文本内容
    }
});
  1. 若需要更精确的拖拽结束时机，可结合mouseup事件：
document.addEventListener('mouseup', (event) => {
    setTimeout(() => { // 确保在selectionchange之后执行
        const selection = window.getSelection();
        if (!selection.isCollapsed) {
            const selectedText = selection.toString().trim();
            // 处理选中文本
        }
    }, 0);
});
  1. 通过Web组件与ArkTS的通信机制将文本传递到应用层：
// 在ArkTS中
webController.getWebMessenger().registerWebMessageHandler((data: string) => {
    // 处理接收到的选中文本
});

注意：需要确保Web组件已启用JavaScript执行权限，并合理处理跨层通信。这种方式能准确捕获通过拖拽操作选择的文本内容。

回到顶部