剪贴板事件

【问题标题】：Clipboard Event剪贴板事件
【发布时间】：2018-01-11 14:59:24
【问题描述】：

我遇到了从代码创建 ClipboardEvent 的问题。未定义已创建事件中的剪贴板数据对象。

有人知道吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input id="testPasteInput">
    <button onclick="pasteFromCode()">Paste</button>
    <script>
        const testPasteInput = document.getElementById('testPasteInput');
        testPasteInput.addEventListener('paste', ({clipboardData}) => console.log(clipboardData.getData('text')));

        function pasteFromCode() {
            const clipboardEvent = new ClipboardEvent('paste', { dataType: 'text/plain', data: '123' });
            testPasteInput.dispatchEvent(clipboardEvent);
        }
    </script>
</body>
</html>

【问题讨论】：

为什么不直接设置值？
@baao 这只是一个例子。我有一种情况需要调度 ClipboardEvent

标签： javascript html

【解决方案1】：

这是特定于浏览器的问题。您的代码在 Firefox 中运行良好，但在 Chrome 和 Safari 等 webkit 浏览器中未正确设置 clipboardData。

我已经使用您的代码创建了这个fiddle，可以在 Firefox 中对其进行测试，以验证它在那里工作。

其实ClipboardEvent是一种实验性技术，目前还没有被所有主流浏览器完全支持。 Internet Explorer 尚不支持使用构造函数（如new ClipboardEvent('paste')）本身来创建事件。可以从MDN-documentation 的下图中验证相同的浏览器兼容性

但是，Chrome 提供了对所有三个的支持，因此这是他们的错误。我在 Chrome 错误报告仪表板中报告了相同的错误here。希望他们能在即将发布的任何版本中采纳并解决问题。

【讨论】：