JavaScript 使用 clipboardData 接口可以实现网页内容和剪贴板之间的交互。通过该接口，我们可以轻松地将文本、图像等数据从我们的网页复制到用户剪贴板中，也可以从剪贴板中获取用户复制的内容并进行处理。
clipboardData 是一个全局对象，可以通过 window.navigator.clipboardData 或 event.clipboardData 获取。该对象包含两个常用的属性：
setData() 方法用于将数据写入剪贴板。该方法需要传入两个参数：
下面是一个示例：
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() 方法用于从剪贴板读取数据。该方法只接受一个参数：数据的格式类型。
下面是一个示例：
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 接口提供了一种简单快捷的方式，让我们实现网页内容和剪贴板之间的交互。可以将它用于复制/粘贴文本、图像等。不过，因为它受到了同源策略的限制，所以只能在同源的情况下使用。
本文链接：http://task.lmcjl.com/news/11397.html