网页怎么设置禁止复制粘贴功能?JavaScript实现禁止复制粘贴代码

济南云服务器 2026年5月23日06:04:52JavaScript网页怎么设置禁止复制粘贴功能?JavaScript实现禁止复制粘贴代码已关闭评论5阅读模式

帮朋友开发一个网站,朋友提出不想让别人复制自己网站中的内容,那么,遇到这个需求我们该如何解决呢?接下来,济南网站建设小编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>

济南云服务器
  • 本文由 发表于 2026年5月23日06:04:52
  • 转载请务必保留本文链接:http://news.hcsw666.com/2769