阻止用户复制页面上的文字的几种方法

前端阻止用户复制页面上的文字代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>阻止用户复制页面上的文字</title>
        <style>
            #box{
                /* 禁止文字选中 */
                user-select: none;
                position: relative;
            }
            /* 添加遮罩层 */
            em{
                width: 100%;
                height: 100%;
                position: absolute;
                background-color: black;
                opacity: 0.4;
                top: 0;
                left: 0;
                z-index:10;

            }
        </style>
    </head>
    <body>
        <div id="box">
           <p>阻止用户复制页面上的文字</p>
           <em></em> 
        </div>
    </body>
    <script>
        // 禁止使用右键复制
            document.oncontextmenu =function (eve){
                var e=eve||window.event;
                e.returnValue = false|| e.preventDefault();
        }
            // 禁用选中功能
        document.onselectstart =function(){
                return false;
          };

    </script>
    </html>
posted @ 2020-05-14 22:06  Cupid05  阅读(27)  评论(0)  编辑  收藏  举报