在 vaadin 8 中将文本复制到剪贴板 [英] Copy text to clipboard in vaadin 8

问题描述

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

I want to ask how to correctly copy some text to clipboard in vaadin 8 java web application. I have found solution that works in Chrome and IE, but does not work in Firefox.

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

The Firefox is always saying error "document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler." in console.

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

The only way how to get Firefox to copy text to clipboard is by some user-triggered event handler (click or focus events). But I have failed to create or inject such handler to vaadin component (e.g. Button or MenuItem).

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

Or is there a setting/policy in Firefox to overcome this behaviour ?

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

So I want to ask how to make it work.

我的解决方案是:

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

Define javascript helper functions in my_ui.js:

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 依赖项.

Include javascript dependency in vaadin.

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

使用 HTML 内容创建 Label，将几乎不可见的 textarea 放入 Label(Chrome 中至少需要 1x1px).

Create Label with HTML content, put nearly invisible textarea into Label (needs to by at least 1x1px in Chrome).

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中定义辅助函数.

Define helper function in java.

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

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

Define MenuItem with action in MenuBar in the UI.

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

此解决方案在 Chrome 和 IE 中运行良好，我需要使其在 Firefox 中也能运行.

This solution works fine in Chrome and IE, I need to make it work also in Firefox.

推荐答案

我认为在 Firefox 中没有任何方法可以解除这个限制.

I don't think there's any way of lifting that restriction in Firefox.

您需要做的是使用 JavaScript 将客户端单击侦听器添加到应该触发复制操作的按钮上，但是您还需要主动将内容发送到客户端，而不仅仅是填充按需.表示为代码，这可能是这样的:

What you'd have to do instead is to use JavaScript to add a client-side click listener to the button that should trigger the copy operation, but then you also need to proactively send the contents to the client instead of only populating it on demand. Expressed as code, that could be something along the lines of this:

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

I noticed that there's also an add-on for this purpose: https://vaadin.com/directory/component/jsclipboard-add-on/overview

这篇关于在 vaadin 8 中将文本复制到剪贴板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！