实现页面文本内容不可选中/不可复制
2022-04-18 本文已影响0人
lio_zero
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()
}