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

标签： javascriptjavaweb-applicationsvaadinvaadin8

我认为没有任何方法可以解除 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

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

问题描述

解决方案

推荐阅读