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

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

Firefox 总是提示“错误”document.execCommand(‘cut’/‘copy’) 被拒绝，因为它不是从短暂运行的用户生成的事件处理程序内部调用的。“在控制台中。

让 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 内容的 Label，将几乎不可见的文本区域放入 Label 中（在 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 中也能运行。

我不认为有任何方法可以解除 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 https://vaadin.com/directory/component/jsclipboard-add-on/overview