禁用文字选择需用 css 的 user-select 属性分端处理:微信小程序加 -webkit-user-select: none;小程序 webview 中需对容器设置 -webkit-user-select: none 和 user-select: none。

不能靠 uni.onCopy 拦截——它只在 App 端生效,且仅响应“复制”动作,对长按选中、拖拽、截图完全无效。 真正能控制文本是否可选的,是 CSS 的 user-select 属性,但不同平台表现差异极大,必须分端处理。
微信小程序里禁用文字选择要加 -webkit-user-select: none
小程序 WebView 内核(iOS WKWebView / Android X5)默认允许长按选中文本,尤其在 rich-text 或 v-html 渲染内容时容易触发。直接给容器加:
.no-select {
-webkit-user-select: none;
user-select: none;
}
注意:user-select: none 在小程序基础库 -webkit-user-select 前缀;iOS 上两者都有效,但仅写 user-select 会失效。
App 端(iOS/Android)需额外处理 WebView 行为
原生 WebView 对 user-select 支持更严格,但仍有例外:
- iOS:若页面含
input或textarea,其父容器设user-select: none可能导致光标无法聚焦——建议只对纯展示区域(如<view class="content"></view>)设置 - Android:部分厂商 WebView(如华为、小米)会忽略
user-select,需配合pointer-events: none(但会禁用所有交互,慎用) - App 端若使用 nvue,
user-select不生效,必须用selectable="false"属性写在<text></text>或<view></view>上
H5 页面禁用复制要防住右键 + 长按 + 拖拽
H5 在微信内置浏览器或 Safari 中,仅靠 CSS 不够:
- 加
oncontextmenu="return false"阻止右键菜单 - 监听
touchstart并e.preventDefault()可抑制部分长按触发(但影响滚动体验,不推荐全局加) - 对关键段落加
style="-webkit-touch-callout: none;",防止 iOS Safari 弹出“拷贝/翻译”气泡 - 真正想防住,得结合服务端水印或动态渲染(如用 canvas 绘制文字),但成本高、可访问性差
最常被忽略的一点:富文本组件 <rich-text></rich-text> 会继承父级样式,但内部节点可能重置 user-select;如果禁用失败,检查是否漏写了 class 或被内联样式覆盖。另外,uni-app 的条件编译 #ifdef APP-PLUS 和 #ifdef MP-WEIXIN 必须用上,否则 H5 和小程序混写时样式会错乱。











