剪贴板事件 [英] Clipboard Event

查看：35 发布时间：2021/9/23 19:56:53 javascript html

本文介绍了剪贴板事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

可能有人对此有所了解吗?

<html lang="zh-cn"><头><meta charset="UTF-8"><title>文档</title><身体><input id="testPasteInput"><button onclick="pasteFromCode()">粘贴</button><脚本>const testPasteInput = document.getElementById('testPasteInput');testPasteInput.addEventListener('paste', ({clipboardData}) => console.log(clipboardData.getData('text')));函数 pasteFromCode() {const clipboardEvent = new ClipboardEvent('paste', { dataType: 'text/plain', data: '123' });testPasteInput.dispatchEvent(clipboardEvent);}</html>

解决方案

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

我已经使用您的代码创建了这个

但是，Chrome 已经为这三者提供了支持，因此这是他们的错误.我在 Chrome 错误报告仪表板中报告了一个错误here相同.希望他们能在即将发布的任何版本中找到并解决该问题.

I'm faced a problem with creating a ClipboardEvent from code. clipboardData object in created event not defined.

May be somebody know something about it?

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

解决方案

This is a browser specific issue. Your code works fine in Firefox, but clipboardData is not being set correctly in webkit browsers like Chrome and Safari.

I have created this fiddle with your code, which can be tested in Firefox to verify that it is working there.

Actually ClipboardEvent is an experimental technology, which is not yet fully supported by all the major browsers. The usage of event creation using the constructor(like new ClipboardEvent('paste')) itself is not yet supported in Internet Explorer. Tthe same can be verified from the image below from MDN-documentation for browser compatibility

But, Chrome has provided support for the all three, and therefore it is their bug. I have reported a bug here in Chrome bug report dashboard for the same. Hopefully they will pick it up and fix the issue in any of their upcoming releases.

这篇关于剪贴板事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

剪贴板事件 [英] Clipboard Event

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

剪贴板事件 [英] Clipboard Event

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭