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

Question

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

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

我将在这里留下的只是代码。 并希望其他人会找到它并使用比我更少的时间。

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);
}

Answer 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 中。 然后将文本区域添加到我们的文件中，因为您只能复制可见的值。 然后选择、复制文本，最后删除文本区域。 又快又干净。

您还可以添加以下行：

el.setSelectionRange(0, 99999);

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