您现在的位置是:网站首页>>前端技术>>html+css+js

js关于复制粘贴的一些相关操作

发布时间:2020-12-21 13:41:15作者:wangjian浏览量:102点赞量:3

    在一些网站中的信息是无法进行复制粘贴的,例如我们在注册一个用户时,密码框无法进行复制粘贴,那么是如何实现的呢?

    这里主要使用到了js的copy(复制)和paste(粘贴)两种方法

    1:copy(复制)

    <h1 id="nocopy">
        这段文本不运行复制
    </h1>
    <script>
        nocopyHtml = document.getElementById('nocopy')
        nocopyHtml.oncopy = () => {
            alert('不允许复制哦!')
            return false;
        }
    </script>

    如上当我们复制h1标签中的文字时会弹出禁止复制的提示,并且文本信息无法被复制

    2:paste(粘贴)

    <input type="text" id="nopaste">
    <script>
        nopasteHtml = document.getElementById('nopaste')
        nopasteHtml.onpaste = () => {
            alert('不允许粘贴哦!')
            return false;
        }
    </script>

    如上当我们向input框中粘贴我们复制的内容时会弹出禁止粘贴的提示,并且无法将我们复制的内容粘贴到文本框中 

    3:自行设置剪切板/获取的内容

    <h1 id="nocopy">
        这段文本不运行复制
    </h1>
    <input type="text" id="nopaste">
    <script>
        document.getElementById('nocopy').addEventListener('copy', (event) => {
            const clipboardData =
                event.clipboardData || event.originalEvent?.clipboardData;
            clipboardData?.setData('text/plain', '复制的内容一定是这个!');//设置剪切板内容
            event.preventDefault();//通知 Web 浏览器不要执行与事件关联的默认动作
        })
        document.addEventListener('paste', () => {
            const clipboardData =
                event.clipboardData || event.originalEvent?.clipboardData;
            const text = clipboardData?.getData('text');//获取剪切板内容
            console.log(text)
            event.preventDefault()//通知 Web 浏览器不要执行与事件关联的默认动作
        })
    </script>


3 +1