迹忆客 专注技术分享

本篇文章将介绍在 JavaScript 中检测粘贴事件上的剪贴板数据。

JavaScript 剪贴板数据

当用户通过浏览器 UI 启动粘贴操作时，将引发粘贴事件。

当光标位于可编辑上下文中时，默认操作是将剪贴板的内容粘贴到光标位置的文档中。 此事件的处理程序可以通过调用事件的 clipboardData 属性上的 getData() 来访问剪贴板的内容。

事件处理程序必须使用 event.preventDefault() 取消默认操作，并手动插入所需数据以覆盖默认行为。 可以创建并发送合成插入事件，但这不会影响文档的内容。

EventTarget 接口的 addEventListener() 方法配置了一个函数，只要指定的事件被传递到目标就会被调用。

举个例子，定义两个 div 元素。 一个是源头，一个是目的地。

Source Div 将包含要从中复制的数据，目标将是粘贴复制数据的位置。

<div class="source">Hello World!</div>
<div class="destination" contenteditable="true">...Good Bye!</div>
const destinationElement = document.querySelector('div.destination');

destinationElement.addEventListener('paste', (event) => {
  const paste = (event.clipboardData || window.clipboardData).getData('text');
  console.log(paste);

  const selection = window.getSelection();
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(paste));
  event.preventDefault();
});

在上面的示例中，我们首先使用 querySelector 选择目标元素。 选择元素后，我们将监听粘贴事件。

一旦用户粘贴数据，便会从事件中提取剪贴板数据。

从目标元素中删除原始内容，并将新内容插入到目标元素中。 尝试在任何支持粘贴事件的浏览器中运行上面的代码； 你会得到以下结果。

之前：

之后：