javascript - 将文本复制到 vaadin 8 中的剪贴板

Question

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

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

让 Firefox 将文本复制到剪贴板的唯一方法是通过某些用户触发的事件处理程序(单击或聚焦事件)。但是我未能创建或注入(inject)此类处理程序到 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 中至少需要 1x1 像素)。

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