美文网首页前端大杂烩
实现页面文本内容不可选中/不可复制

实现页面文本内容不可选中/不可复制

作者: lio_zero | 来源:发表于2022-04-18 15:56 被阅读0次

CSS

使用 user-select: none 不可选中,也就不可以复制。

body {
  user-select: none;
}

使用 JS

  • 监听 selectstart 事件,禁止选中。
  • 监听 copy 事件,不可复制。

当用户选中一片区域时(包括点击),将触发 selectstart 事件,Selection API 将会选中一片区域。禁止选中区域(使用 preventDefault 阻止事件的默认行为)即可实现页面文本不可复制。

// 不可选中
document.documentElement.onselectstart = e => {
  e.preventDefault()
}

// 不可复制
document.documentElement.oncopy = e => {
  e.preventDefault()
}

相关文章

网友评论

    本文标题:实现页面文本内容不可选中/不可复制

    本文链接:https://www.haomeiwen.com/subject/sludertx.html