浏览器中的剪切板是如何监听复制事件的？ - 打野赵怀真 - 沸点 - 掘金

1年前

浏览器中的剪切板是如何监听复制事件的？
在浏览器中，可以通过 JavaScript 监听剪切板事件（如复制、剪切和粘贴）来实现对用户复制内容的监控。主要使用 `copy`、`cut` 和 `paste` 事件来处理这些操作。以下是实现的基本步骤及代码示例。

### 监听剪切板事件

1. **添加事件监听器**：使用 `addEventListener` 方法为目标元素添加相应的剪切板事件监听器。
2. **处理事件**：在事件处理函数中，可以访问剪切板数据并进行相应处理。

### 示例代码

```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>剪切板事件示例</title>
</head>
<body>
<textarea id="textArea" placeholder="复制这里的内容"></textarea>
<script>
const textArea = document.getElementById('textArea');

// 监听复制事件
textArea.addEventListener('copy', function(event) {
console.log('内容已复制到剪切板');
// 通过 event.clipboardData 访问剪切板数据
const copiedText = window.getSelection().toString(); // 获取选中的文本
event.clipboardData.setData('text/plain', copiedText); // 设置剪切板内容
event.preventDefault(); // 阻止默认行为
});

// 监听剪切事件
textArea.addEve

展开

今天学到了