Question

我遇到了从代码创建ClipboardEvent的问题。未定义创建事件中的clipboardData对象。

可能有人知道一些事情吗？

<!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>

Answer 1

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

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

实际上ClipboardEvent是一项实验性技术，尚未得到所有主流浏览器的全面支持。 Internet Explorer中尚不支持使用构造函数（如new ClipboardEvent('paste')）本身创建事件的用法。对于浏览器兼容性，可以从MDN-documentation下面的图片中验证相同内容

但是， Chrome 已经为这三者提供了支持，因此这是他们的错误。我在Chrome错误报告信息中心中报告了一个错误here。希望他们能够在即将发布的任何版本中解决问题并解决问题。

剪贴板事件

1 个答案: