JavaScript 复制和粘贴事件

在 Web 开发中，我们经常需要实现一些复制和粘贴的操作，比如复制一段文本、粘贴一个链接等。而 JavaScript 提供了一些 API 来实现这些操作。

复制事件

复制事件可以在用户复制文本时触发，并允许我们捕获剪贴板中的文本。以下是一个简单的例子：

document.addEventListener('copy', function(event) {
    event.preventDefault(); // 阻止默认复制操作
    var text = window.getSelection().toString(); // 获取被选中的文本
    if (text) {
        event.clipboardData.setData('text/plain', text); // 将文本放入剪贴板
        console.log('已复制文本：', text);
    }
});

上面代码中，我们通过 document.addEventListener 监听 copy 事件，当用户选中一段文本并通过快捷键或右键菜单进行复制时，该事件就会被触发。我们在事件回调里调用了 event.preventDefault 方法阻止默认复制操作，并使用 window.getSelection() 方法获取选中的文本，最后通过 event.clipboardData.setData() 方法将文本放入剪贴板。

粘贴事件

粘贴事件可以在用户粘贴文本时触发，并允许我们获取剪贴板中的文本。以下是一个简单的例子：

document.addEventListener('paste', function(event) {
    event.preventDefault(); // 阻止默认粘贴操作
    var text = event.clipboardData.getData('text/plain'); // 获取剪贴板中的文本
    if (text) {
        console.log('已粘贴文本：', text);
    }
});

上面代码中，我们通过 document.addEventListener 监听 paste 事件，当用户通过快捷键或右键菜单进行粘贴时，该事件就会被触发。我们在事件回调里调用了 event.preventDefault 方法阻止默认粘贴操作，并使用 event.clipboardData.getData() 方法获取剪贴板中的文本。

结语

通过使用上述 API，我们可以很方便地实现 Web 中的复制和粘贴操作。除了文本，我们还可以在剪贴板中保存文件等其他类型的数据。要了解更多详细使用方法，请参考相关文档。