JS 剪切板应用 clipboardData 详细解析

简介

JavaScript 使用 clipboardData 接口可以实现网页内容和剪贴板之间的交互。通过该接口，我们可以轻松地将文本、图像等数据从我们的网页复制到用户剪贴板中，也可以从剪贴板中获取用户复制的内容并进行处理。

clipboardData 属性

clipboardData 是一个全局对象，可以通过 window.navigator.clipboardData 或 event.clipboardData 获取。该对象包含两个常用的属性：

• setData()：将数据写入剪贴板。
• getData()：从剪贴板读取数据。

setData() 方法

setData() 方法用于将数据写入剪贴板。该方法需要传入两个参数：

• format 类型：数据的格式类型，可以是 "text" 或 "url"。
• data 字符串：需要写入剪贴板的数据。

下面是一个示例：

document.querySelector('#copy-btn').addEventListener('click', function (e) {
  e.preventDefault();
  var input = document.querySelector('#input');
  var value = input.value;
  window.navigator.clipboardData.setData('Text', value);
  alert('已复制到剪贴板');
});

上面代码实现了当用户点击复制按钮时，将输入框中的内容写入剪贴板，并提示用户已成功复制。

请注意：因为 setData() 方法属于 window.navigator.clipboardData，所以它只能在同源的情况下使用。

getData() 方法

getData() 方法用于从剪贴板读取数据。该方法只接受一个参数：数据的格式类型。

下面是一个示例：

document.querySelector('#paste-btn').addEventListener('click', function (e) {
  e.preventDefault();
  var value = window.navigator.clipboardData.getData('Text');
  if (value) {
    document.querySelector('#input').value = value;
    alert('已粘贴');
  } else {
    alert('剪贴板为空');
  }
});

上面代码实现了当用户点击粘贴按钮时，从剪贴板中读取文本数据并填充到输入框中，并提示用户已成功粘贴。

请注意：因为 getData() 方法属于 window.navigator.clipboardData，所以它只能在同源的情况下使用。

结论

clipboardData 接口提供了一种简单快捷的方式，让我们实现网页内容和剪贴板之间的交互。可以将它用于复制/粘贴文本、图像等。不过，因为它受到了同源策略的限制，所以只能在同源的情况下使用。