前端开发_怎么禁止用户复制内容
在开发前端项目时，有时会有这种要求，禁止用户复制文本内容，本文分享几种简单的方法。
一、JS阻止默认事件
禁用复制：
document.addEventListener('copy', e => {e.preventDefault()
})
禁止剪切：
document.addEventListener('cut', function(e) {e.preventDefault();
});禁用鼠标右键复制：
document.addEventListener('contextmenu', function(e) {e.preventDefault();
});
禁用键盘快捷键复制：
document.addEventListener("keydown", function (e) {if ((e.ctrlKey || e.metaKey) && e.key === "c") {e.preventDefault();}});
二、CSS样式控制
禁用键盘快捷键：，让用户无法选中对应内容。仅提供基础防护，敏感内容应通过服务端加密或权限控制实现真正的内容保护。前端防复制主要适用于阻止普通用户的随意复制行为。
.no-copy {user-select: none;position: relative;
}
.no-copy::after {content: "禁止复制";position: absolute;right: -120px;
}user-select是一个CSS属性，用于控制用户能否选择页面上的文本内容。这个属性在创建特殊交互体验或保护内容时非常有用。
user-select属性取值及效果
| 取值 | 描述 | 示例效果 |
|---|---|---|
auto | 默认值。文本是否可选取决于浏览器默认行为 | 常规文本选择 |
none | 元素及其子元素的文本不可被选中 | 完全禁止文本选择 |
text | 文本可以被选中 | 常规文本选择 |
all | 点击元素会选中其所有文本内容（包括子元素） | 单击选中整块内容 |
contain | 允许在元素内选择文本，但选择范围被限制在该元素边界内（实验性特性） | 选择不会扩展到元素外部 |
element | 非标准值（IE特有），效果类似contain | IE浏览器中的限制选择 |
三、 Canvas渲染文本
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.fillText("文本内容不可复制", 10, 50);
document.body.appendChild(canvas);
四、加上版权信息
允许复制，但是会加上版权信息。
document.addEventListener('copy', function(e) {const selection = window.getSelection().toString();const copyright = `\n\n----------------\n文章来源：@开心小老虎`;e.preventDefault();e.clipboardData.setData('text/plain', selection + copyright);
});