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

Posted cupid10

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了阻止用户复制页面上的文字的几种方法相关的知识,希望对你有一定的参考价值。

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

    <!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>

以上是关于阻止用户复制页面上的文字的几种方法的主要内容,如果未能解决你的问题,请参考以下文章

我用Python在网上复制文字的几种实用方法

HTML代码片段

HTML代码片段

Laravel:如何在控制器的几种方法中重用代码片段

网页文字竖排的几种实现方式

设置http跳转https的几种方法