帮朋友开发一个网站,朋友提出不想让别人复制自己网站中的内容,那么,遇到这个需求我们该如何解决呢?接下来,济南网站建设小编news.hcsw666.com/就来为大家分享一个通过编写JavaScript代码,解决类似问题的小案例,有需要的小伙伴可以过来参考一下。
关键代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>禁止复制粘贴页面</title>
<style>
/* CSS禁止文本选中(基础防护) */
body {
-webkit-user-select: none; /* Safari/Chrome */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* 标准语法 */
}
</style>
</head>
<body>
<h3>这段内容无法被复制、选中、右键</h3>
<p>测试文字:禁止复制粘贴保护效果</p>
<script>
// 1. 禁止右键菜单
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
});
// 2. 禁止文本选中
document.addEventListener('selectstart', function (e) {
e.preventDefault();
});
// 3. 禁止复制、剪切、粘贴操作
document.addEventListener('copy', function (e) {
e.preventDefault();
});
document.addEventListener('cut', function (e) {
e.preventDefault();
});
document.addEventListener('paste', function (e) {
e.preventDefault();
});
// 4. 禁止键盘快捷键(Ctrl+C/Ctrl+X/Ctrl+V)
document.addEventListener('keydown', function (e) {
// Ctrl+C 复制 | Ctrl+X 剪切 | Ctrl+V 粘贴
if ((e.ctrlKey && (e.key === 'c' || e.key === 'x' || e.key === 'v'))
|| e.key === 'Meta' ) { // Meta键=Mac的Command键
e.preventDefault();
}
});
</script>
</body>
</html>
评论