文章目录
-
-
- copyOptions 是什么
- 完整代码示例
- HTML 页面（用于测试）
- 三种模式的实际表现
- 和 H5 层 user-select 的区别
- 实际业务场景
- 踩坑记录
- 写在最后
-
上两篇讲的都是 H5 层面的剪贴板操作。但有些场景下，你需要的不是"监听"或"修改"，而是直接在框架层禁止用户复制 Web 内容。 比如付费阅读应用、版权保护场景、企业内部文件展示……用 H5 的 user-select: none CSS 并不可靠（用户可以打开开发者工具绕过），但通过 ArkTS 层的 copyOptions 属性来控制，就彻底多了。
copyOptions 是什么
copyOptions 是 Web 组件的一个 ArkTS 属性，用来控制 Web 页面内容的复制行为。
它接受的值来自 CopyOptions 枚举：
| CopyOptions.None | 完全禁止复制——用户无法选中文本，也无法复制 |
| CopyOptions.InApp | 只允许在应用内部复制（不能粘贴到其他应用） |
| CopyOptions.LocalDevice | 允许在本设备范围内复制粘贴（默认值） |
| CopyOptions.CROSS_DEVICE（仅部分场景） | 跨设备复制 |
完整代码示例
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct WebComponent {
controller: webview.WebviewController = new webview.WebviewController();
// 当前复制选项，可通过按钮动态切换
@State copyOption: CopyOptions = CopyOptions.LocalDevice;
build() {
Column({ space: 12 }) {
// 切换复制选项的按钮组
Row({ space: 8 }) {
Button('禁止复制')
.onClick(() => {
this.copyOption = CopyOptions.None;
})
Button('仅应用内')
.onClick(() => {
this.copyOption = CopyOptions.InApp;
})
Button('本设备')
.onClick(() => {
this.copyOption = CopyOptions.LocalDevice;
})
}
.padding(12)
// Web 组件，通过 .copyOptions() 绑定状态
Web({ src: $rawfile('copyOptions.html'), controller: this.controller })
.copyOptions(this.copyOption)
.width('100%')
.layoutWeight(1)
}
.height('100%')
.width('100%')
}
}
注意 @State copyOption 的用法——把 copyOptions 绑定到状态变量后，切换按钮就能实时改变 Web 组件的复制权限，不需要重新加载页面。
HTML 页面（用于测试）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复制选项测试</title>
<style>
body { padding: 24px; font-size: 16px; line-height: 1.6; }
.content-block {
padding: 16px;
background: #f9f9f9;
border-radius: 8px;
margin: 12px 0;
}
</style>
</head>
<body>
<h2>复制选项测试页面</h2>
<div class="content-block">
<p>这是一段版权内容，请尝试选中并复制这段文字。</p>
<p>根据当前的 copyOptions 设置，复制行为会有所不同：</p>
<ul>
<li>CopyOptions.None：完全无法选中文本</li>
<li>CopyOptions.InApp：可以选中，但只能在应用内粘贴</li>
<li>CopyOptions.LocalDevice：正常复制粘贴（默认）</li>
</ul>
</div>
</body>
</html>
三种模式的实际表现
和 H5 层 user-select 的区别
很多人第一反应是用 CSS 的 user-select: none 来禁止复制：
body {
user-select: none;
-webkit-user-select: none;
}
这确实能阻止普通用户，但有两个问题：
而 CopyOptions.None 是在 框架层 实现的，Web 渲染引擎在底层就屏蔽了文本选择能力，JS 也无法绕过。这个级别的保护比纯 CSS 方案强得多。
实际业务场景
付费阅读 App：对免费内容用 LocalDevice，对付费内容用 InApp 甚至 None，防止用户复制后分发。
企业内部文件查看器：将文件内容渲染在 Web 组件里，设置为 InApp，文件内容可以在应用内引用，但不能直接粘贴到微信/邮件外传。
合同/协议展示页：设置为 LocalDevice（默认），让用户可以正常复制协议条款，方便他们查询和保存。
踩坑记录
坑：CopyOptions.None 会影响可访问性
设置为 None 后，屏幕阅读器也无法正常选中页面内容。如果你的应用需要支持无障碍功能，要谨慎使用 None，优先考虑 InApp。
坑：动态切换 copyOptions 时，已选中的文本不会立即取消选中
如果用户在你切换到 None 之前已经选中了文本，已选中的状态不会立刻消失。这是正常现象，下一次用户交互时选区会自动清空。
写在最后
copyOptions 是个很实用的属性，三行代码就能解决版权保护的问题。配合上两篇讲的事件监听，可以构建非常灵活的剪贴板权限控制方案：框架层兜底（copyOptions），H5 层精细处理（事件监听）。
