在vaadin 8中将文本复制到剪贴板

Question

我想问一下如何在 vaadin 8 java web 应用程序中正确地将一些文本复制到剪贴板。我找到了适用于 Chrome 和 IE 的解决方案，但不适用于 Firefox。

Firefox 总是在控制台中显示错误“document.execCommand('cut'/'copy') was denied because it was not called from inside a short running user-generated event handler.” .

如何让 Firefox 将文本复制到剪贴板的唯一方法是通过一些用户触发的事件处理程序（单击或焦点事件）。但我未能创建或注入此类处理程序到 vaadin 组件（例如 Button 或 MenuItem）。

或者 Firefox 中是否有设置/策略来克服这种行为？

所以我想问一下如何让它工作。

我的解决办法是：

在 my_ui.js 中定义 javascript 辅助函数：

function copy_to_clipboard(elementId, text) {
    if (document.queryCommandSupported('copy')) {
        var e = document.getElementById(elementId);
        if (e != null) {
            e.value = text;
            e.select();
            document.execCommand('copy');
        }
    }
}

在 vaadin 中包含 javascript 依赖项。

Page.getCurrent().addDependency(new Dependency(Type.JAVASCRIPT, "vaadin://my_ui.js"));

使用 HTML 内容创建标签，将几乎不可见的文本区域放入标签中（在 Chrome 中需要至少 1x1px）。

Label clipboardHelperLabel = new Label();
clipboardHelperLabel.setContentMode(ContentMode.HTML);
clipboardHelperLabel.setValue(
    "<textarea " +
        "id=\"clipboard-helper-id\"" +
        "style=\"width: 1px; height: 1px; border: 0px solid black; padding: 0px; margin: 0px;\" " +
    ">" +
    "</textarea>"
);

在java中定义辅助函数。

public static void copyToClipboard(String text) {
    String code = "copy_to_clipboard('clipboard-helper-id','" + text + "');";
    JavaScript.getCurrent().execute(code);
}

在 UI 的 MenuBar 中使用操作定义 MenuItem。

MenuBar toolbar = new MenuBar();
MenuItem copyToClipboardMenuItem = toolbar.addItem(
    "Copy to clipboard",
    e -> {
        String text = "Hello clipboard";
        copyToClipboard(text);
    }
);

这个解决方案在 Chrome 和 IE 中运行良好，我需要让它在 Firefox 中也能运行。

Answer 1

我认为在 Firefox 中没有任何方法可以解除该限制。

您必须改为使用 JavaScript 向应该触发复制操作的按钮添加客户端点击侦听器，但您还需要主动将内容发送到客户端，而不是仅填充按需提供。用代码表示，可能是这样的：

JavaScript.getCurrent().execute(
  "document.getElementById('button').addEventListener('click', function() {" +
    "copy_to_clipboard('clipboard-helper-id','" + text + "');" +
  "})");

编辑： 我注意到还有一个用于此目的的附加组件：https://vaadin.com/directory/component/jsclipboard-add-on/overview