浏览器剪切板事件的学习（copy，cut，paste）

最新推荐文章于 2023-10-14 10:41:24 发布

有梦想的菜

最新推荐文章于 2023-10-14 10:41:24 发布

阅读量1.2k

点赞数 1

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/qq_51534884/article/details/123538333

版权

本文介绍了如何利用浏览器的剪切板事件来操作复制和粘贴内容。通过监听`copy`、`cut`和`paste`事件，可以自定义用户剪贴板上的信息。在示例中，当用户复制内容时，会将特定文本设置到剪贴板，剪切事件同样如此。而在目标元素上粘贴时，内容会被转换为大写并插入到文档中。

摘要由CSDN通过智能技术生成

今天遇到了粘贴文章所有内容用户剪切板要添加属于自己附加的内容到用户的剪切板，于是学习了浏览器剪切板事件

<div class="source" contenteditable="true">复制的文本...</div>
<div class="target" contenteditable="true">然后粘贴到这个</div>
<div class="target1" contenteditable="true">然后粘贴到这个(paste事件)</div>

const source = document.querySelector('div.source');
    const target1 = document.querySelector('div.target1');
    //addEventListener 事件监听器
    source.addEventListener('copy', (event) => {
        console.log('copy事件被执行了');
        //setData() 方法用来设置拖放操作的drag data到指定的数据和类型。
        event.clipboardData.setData('text/plain', '当用户通过浏览器UI（例如，使用 Ctrl/⌘+C  键盘快捷方式或从菜单中选择“复制”）启动复制操作并响应允许的document.execCommand(\'copy\')调用时触发copy事件。');
        event.preventDefault();//阻止默认事件
    });
    source.addEventListener('cut', (event) => {
        console.log('cut事件被执行了');
        event.clipboardData.setData('text/plain', '我设置剪切事件到剪切板的内容');
        event.preventDefault();//阻止默认事件
    });
    target1.addEventListener('paste', (event) => {

        let paste = (event.clipboardData || window.clipboardData).getData('text');
        paste = paste.toUpperCase();

        const selection = window.getSelection();
        if (!selection.rangeCount) return false;
        selection.deleteFromDocument();
        selection.getRangeAt(0).insertNode(document.createTextNode(paste));
        event.preventDefault();
    });