码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-05-14 22:19:33      阅读:72      评论:0      收藏:0      [点我收藏+]

标签:head   viewport   city   back   select   title   round   idt   opacity   

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

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

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

标签:head   viewport   city   back   select   title   round   idt   opacity   

原文地址:https://www.cnblogs.com/cupid10/p/12891693.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!