原生js实现复制的文字信息的自定义修改

最近在观看别人的博客，看到一些有用的信息就想复制下来试一试，粘贴的时候发现内容后面添加了博客主自定义的信息，感觉很有趣，所以自己也试着查询资料实现一下，最终实现。实现代码如下。

复制时自定义修改粘贴板的内容

// 监听copy(复制)事件
document.addEventListener("copy", (e) => {
    // 自己想要在粘贴内容添加的文字信息
    let myText = "复制的数据";
    // 获取粘贴板对象
    let clipboardData = e.clipboardData || window.clipboardData;
    // 如果粘贴板对象不存在，便停止操作
    if (!clipboardData) {
        return 
    }
    // 获取到选中的文字，并且加上自己想要添加的文字信息，前后都可以
    let result = window.getSelection().toString() + ":" + myText;
    // 阻止粘贴事件执行默认方法
    e.preventDefault();
    // 将修改完的复制的信息赋值到粘贴板上
    clipboardData.setData('text', result);
}, false)

如上代码便可成功自定义复制文字信息。

查看粘贴的信息是否正确

// 监听paste(粘贴)事件
document.addEventListener("paste", (e) => {
    // 打印粘贴板中的文字内容
    console.log(e.clipboardData.getData("text"))
}, false)

大功告成！