极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。
每天晚上九点 B站讲解前端工程化直播,并解答相关问题。

# 如何实现页面文本不可复制

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 454 (opens new window)

Author

回答者: ssruoyan (opens new window)

user-select: none 不可选中就不可复制 👀

有 CSS 和 JS 两种方法,以下任选其一或结合使用

使用 CSS 如下:

user-select: none;

或使用 JS 如下,监听 selectstart 事件,禁止选中。

当用户选中一片区域时,将触发 selectstart 事件,Selection API 将会选中一片区域。禁止选中区域即可实现页面文本不可复制。

document.body.onselectstart = (e) => {
  e.preventDefault();
};

document.body.oncopy = (e) => {
  e.preventDefault();
};
Last Updated: 11/27/2021, 10:11:48 AM