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

50次阅读

共计 1141 个字符,预计需要花费 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>

正文完
 0