HarmonyOS ArkWeb 系列之用户一复制，我就知道——剪贴板事件监听实战

文章目录剪贴板事件有哪几个ArkTS 侧配置H5 侧的事件监听实现流程图copy 事件拦截修改三种事件的使用场景对比一个实用的只允许粘贴纯文本方案踩坑记录写在最后上一篇讲了怎么用代码主动读写剪贴板。但有时候需求不是主动操作而是监听——用户在我的 Web 页面里做了复制/粘贴/剪切操作我想拦截、修改、或者记录一下。这就是剪贴板事件Clipboard Events的用武之地。剪贴板事件有哪几个浏览器标准里定义了三个剪贴板相关事件事件名触发时机能做什么copy用户触发复制CtrlC 或右键复制修改复制内容、阻止默认复制cut用户触发剪切CtrlX 或右键剪切修改剪切内容、阻止默认剪切paste用户触发粘贴CtrlV 或右键粘贴处理粘贴内容、阻止默认粘贴这三个事件都挂在 DOM 元素上可以给具体元素监听也可以给document监听捕获页面上所有的操作。ArkTS 侧配置和上一篇一样ArkTS 这边只需要加载对应的 HTML 文件Web 组件本身不需要特殊配置import{webview}fromkit.ArkWeb;EntryComponentstruct WebComponent{controller:webview.WebviewControllernewwebview.WebviewController();build(){Column(){Web({src:$rawfile(clipboard_event.html),controller:this.controller})}}}H5 侧的事件监听实现下面是一个完整的示例演示如何监听并处理三种剪贴板事件!DOCTYPEhtmlhtmllangzhheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title剪贴板事件监听演示/titlestylebody{font-family:sans-serif;padding:20px;}#editArea{width:100%;height:120px;border:2px solid #ddd;padding:10px;font-size:16px;border-radius:4px;box-sizing:border-box;}#eventLog{margin-top:16px;padding:10px;background:#f5f5f5;border-radius:4px;min-height:80px;font-size:14px;color:#333;}.event-copy{color:#2196f3;}.event-cut{color:#ff9800;}.event-paste{color:#4caf50;}/style/headbodyh2剪贴板事件监听/h2p在下方文本框中进行复制、剪切、粘贴操作右侧日志区会实时显示事件信息。/ptextareaideditAreaplaceholder在这里输入内容然后尝试复制/剪切/粘贴...选中这段文字然后按 CtrlC 试试看。/textareadivideventLog事件日志将显示在这里/divscriptconsteditAreadocument.getElementById(editArea);consteventLogdocument.getElementById(eventLog);functionappendLog(type,message){constlinedocument.createElement(div);line.classNameevent-type;line.textContent[${newDate().toLocaleTimeString()}]${message};eventLog.insertBefore(line,eventLog.firstChild);// 最多保留 10 条日志while(eventLog.children.length10){eventLog.removeChild(eventLog.lastChild);}}// 监听 copy 事件editArea.addEventListener(copy,function(event){constselectedTextwindow.getSelection().toString();appendLog(copy,copy 事件触发选中内容「${selectedText}」);// 进阶用法修改复制内容比如追加版权信息if(selectedTextevent.clipboardData){constmodifiedTextselectedText\n\n—— 来自我的应用;event.clipboardData.setData(text/plain,modifiedText);event.preventDefault();// 阻止默认复制行为使用我们修改后的内容appendLog(copy,已修改复制内容追加了版权信息);}});// 监听 cut 事件editArea.addEventListener(cut,function(event){constselectedTextwindow.getSelection().toString();appendLog(cut,cut 事件触发剪切内容「${selectedText}」);// 这里不阻止默认行为让系统正常执行剪切});// 监听 paste 事件editArea.addEventListener(paste,function(event){// 获取粘贴内容不阻止默认行为时paste 事件的 clipboardData 是只读的constpastedTextevent.clipboardData?event.clipboardData.getData(text/plain):;appendLog(paste,paste 事件触发粘贴内容「${pastedText}」);// 进阶用法过滤敏感词if(pastedText.includes(敏感词)){event.preventDefault();constfilteredpastedText.replace(/敏感词/g,***);// 手动插入过滤后的内容document.execCommand(insertText,false,filtered);appendLog(paste,已过滤敏感词并粘贴);}});/script/body/html代码里有几个关键点值得注意event.clipboardData是事件对象上携带的剪贴板数据对象。在copy/cut事件里可以读写在paste事件里通常只读。event.preventDefault()阻止浏览器的默认行为。比如在copy事件里调用它浏览器就不会把选中的文本复制到剪贴板而是使用你通过setData()设置的内容。window.getSelection().toString()获取页面上当前选中的文本。流程图copy 事件拦截修改三种事件的使用场景对比copy 事件最常见的用途追加版权声明「复制自 XXX原文链接…」格式化复制内容去掉多余空格、换行等统计用户复制了什么内容数据分析cut 事件常见用途记录删除日志Rich Text 编辑器场景阻止用户剪切某些不可删除的内容paste 事件最常见的用途过滤非法字符或敏感词限制粘贴内容的格式比如只允许粘贴纯文本不允许带格式对粘贴的图片做预处理一个实用的只允许粘贴纯文本方案富文本编辑场景里用户从 Word 复制一段带格式文字粘贴进来往往会连样式一起粘进来把编辑区弄乱。用paste事件可以优雅解决这个问题document.querySelector(#richEditor).addEventListener(paste,function(event){event.preventDefault();// 只取纯文本丢弃 HTML 格式constplainTextevent.clipboardData.getData(text/plain);document.execCommand(insertText,false,plainText);});这个模式很常见理解它比记住一堆 API 更有价值。踩坑记录坑paste 事件里用clipboardData.setData()无效在paste事件里event.clipboardData是只读的调用setData()不会生效。如果需要修改粘贴内容要先preventDefault()然后自己用document.execCommand(insertText, ...)或 Selection API 手动插入内容。坑copy事件里的clipboardData和navigator.clipboard是两套机制事件里的event.clipboardData是同步的只在事件处理函数执行期间有效。navigator.clipboard上一篇讲的那套是异步的 Promise API。两套机制不要混用在同一个事件处理函数里用event.clipboardData就够了。写在最后剪贴板事件这块逻辑清晰copy/cut/paste三个事件配合event.clipboardData和preventDefault()能实现大多数业务需求。下一篇会讲 Web 组件的copyOptions属性——这是 ArkTS 层的能力可以在框架层面控制 Web 内容是否允许被复制比 H5 事件层面的控制更彻底。