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

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

这里主要使用到了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>