原生JS实现网页中的禁止复制功能和弹窗、以及如何在不能复制的网页中实现正常复制。

最新推荐文章于 2024-04-28 13:46:58 发布

前端.Lee

最新推荐文章于 2024-04-28 13:46:58 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签：前端 vue.js javascript node.js webpack Powered by 金山文档

本文链接：https://blog.csdn.net/LEElcg/article/details/128805041

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

在日常浏览网页的时候，经常遇到网页中文字中不能复制的情况，那么这个功能是如何实现的呢？

效果图（当用户按下ctrl + c的情况下）：

1 . 如何实现copy禁用？

css部分：

 <style>
        /**弹窗的样式*/
        .dialog{
            width: 400px;
            height: 290px;
            border-radius: 20px;
            background-color: #fff;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            display: none;
        }
        /**关闭按钮所在div的样式*/
        .dialog .top{
            height: 40px;
            line-height: 40px;
            text-align: right;
        }
        /**关闭按钮的样式*/
        .dialog .top span{
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 25px;
            text-align: center;
            cursor: pointer;
            display: inline-block;
        }
        /*下面字体的样式*/
        .dialog .bot{
            font-size:50px;
            text-align:center;
        }
    </style>

html代码：

 <body>
    <div class="dialog">
        <div class="top">
            <span title="关闭弹窗">×</span>
        </div>
        <div class="bot">
            不能复制哦~
        </div>
    </div>
    <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam quae tenetur facere, eius eaque quis cumque impedit dicta optio repudiandae ad perferendis iste, asperiores enim iusto temporibus molestiae dignissimos voluptatibus et nobis, vero sed deserunt. Sint officiis aut maxime laudantium facilis libero possimus beatae dolore obcaecati reprehenderit quam a, sequi nesciunt, quia fuga iste neque maiores autem, ex sunt ea similique ipsam. Maiores minima facilis, nobis est harum optio autem molestiae. Dolorem voluptate aliquid modi atque illum dolor eum sit a? Repellat quos rerum assumenda eligendi provident labore id exercitationem l
    </p>
    
   
</body>

JS代码：

 <script>
        let body = document.body;  //选出body背景
        let spanDom = document.getElementsByTagName("span")[0];  //关闭的按钮，要添加点击事件
        let dialog = document.getElementsByClassName("dialog")[0]; //弹窗
        /*
            给整个文档添加事件监听，添加的是copy事件。接收到事件源对象。
            并设置背景颜色和显示弹窗。
        */
        document.addEventListener('copy',(e)=>{
            e.preventDefault();
            e.clipboardData.setData('text/plain','不能复制');
            body.style.background="rgba(0,0,0,0.5)";
            dialog.style.display = "block"
        });
        //给关闭按钮添加点击事件，当关闭的时候修改背景、将弹窗关闭。
        spanDom.onclick = function () {
            body.style.background="#fff";
            dialog.style.display = "none";
        }
    </script>

实现整体思路：就是监听网页的copy事件，当事件触发的时候，阻止copy的默认事件发生，然后设置了剪切板事件，设置了不能复制（就是不能复制的情况下，用户进行了复制，然后进行粘贴会出现不能复制的文字）。如下图所示：