如何在没有插件的情况下将文本复制到 Vaadin 中的剪贴板

Question

我花了很长时间试图使所有目录组件正常工作。他们把一些本来可以超级简单的东西变得复杂和困难。

我终于屈服并尝试将一个 javascript 函数复制到我的项目中，它使用一种简单的方法工作。该方法与所有其他方法一样需要由其他组件启动。但是以任何你想要的方式去做。

我只剩下代码了。并希望其他人能找到它并使用比我更少的时间。

void copyText(String text){
    Page page = UI.getCurrent().getPage();
    page.executeJavaScript(
                    "var el = document.createElement('textarea');" +
                    "el.value = [=10=];" +
                    "el.setAttribute('readonly', '');" +
                    "el.style = {" +
                    "   position: 'absolute'," +
                    "   left: '-9999px'" +
                    "};" +
                    "document.body.appendChild(el);" +
                    "el.select();" +
                    "document.execCommand('copy');" +
                    "document.body.removeChild(el);",
            text);
}

Answer 1

void copyText(String text){
    Page page = UI.getCurrent().getPage();
    page.executeJavaScript(
                "var el = document.createElement('textarea');" +
                "el.value = [=10=];" +
                "el.setAttribute('readonly', '');" +
                "el.style = {" +
                "   position: 'absolute'," +
                "   left: '-9999px'" +
                "};" +
                "document.body.appendChild(el);" +
                "el.select();" +
                "document.execCommand('copy');" +
                "document.body.removeChild(el);",
        text);
}

只是为了进一步解释代码。我们需要初始化页面，然后执行plain javascript-code。在此代码中，我将字符串文本作为参数传递，并在代码中将其用作“$0”。

该代码创建了一个文本区域，目录中的大多数插件也是如此。然后它设置 text-string，并通过一些样式将其隐藏在 ui 之外。然后将文本区域添加到我们的文件中，因为您只能复制可见的值。然后选择、复制文本，最后删除文本区域。又快又干净。

您还可以添加以下行：

el.setSelectionRange(0, 99999);

在el.select()之后添加；线。按照W3的说法，用这条线在手机上应该会更好用，不过我没测试过。

如何在没有插件的情况下将文本复制到 Vaadin 中的剪贴板

How to copy text to clipboard in Vaadin without addon

javascript

clipboard

copy

vaadin