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

【问题标题】：How to copy text to clipboard in Vaadin without addon如何在没有插件的情况下在 Vaadin 中将文本复制到剪贴板
【发布时间】：2020-10-09 10:30:24
【问题描述】：

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

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

我要在这里留下的只是代码。并且希望其他人会发现这一点并使用比我更少的时间。

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

【问题讨论】：

您是否测试过这是否适用于 Safari？
我没有。我读到javascript代码应该适用于IE8以上的任何东西。明天我会测试它并返回它。据此josephkhan.me/javascript-copy-clipboard-safari，应该是和他的代码一样的逻辑，上面是一样的。
您在目录中制作了一个插件，对吧？是否有我不知道的复制到剪贴板的“最佳实践”？我只是希望它能帮助而不是误导其他人（如果有的话）。如果你有什么要分享的，请做。
如果我没记错的话，之前有一些特定于浏览器的差异，但我有一段时间没有看它了。我只记得让它在所有平台上都能正常工作并非易事。这就是我询问 Safari 的原因。我没有Mac，所以我无法自己测试。也可以使用不同的移动设备进行测试。

标签： javascript copy vaadin clipboard

【解决方案1】：

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

只是为了进一步解释代码。我们需要初始化页面，然后执行普通的 javascript 代码。在这段代码中，我将字符串文本作为参数传递，并在代码中以“$0”的形式使用它。

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

您还可以添加以下行：

el.setSelectionRange(0, 99999);

在 el.select() 之后添加它；线。根据 W3 的说法，它应该在有这条线的手机上效果更好，但我没有测试过。

【讨论】：