前端开发_怎么禁止用户复制内容

在开发前端项目时，有时会有这种要求，禁止用户复制文本内容，本文分享几种简单的方法。

一、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);
});