使用 FireFox 中的 Vaadin 按钮复制到剪贴板

Question

以下是 Vaadin 按钮的代码：

String textToCopy = "COPY ME!!!";
Button copyBtn = new Button("");
copyBtn.setButtonLayout(false, new IconSelf(VaadinIcon.COPY_O), "Copy"));
copyBtn.addClickListener(event -> {
          getUI().get().getPage().executeJs("navigator.clipboard.writeText(`" + textToCopy + "`);");
    Notification.show(getTranslation(PAGESTRING + "attributestoclipboard"))
});

为了复制我使用的自定义文本navigator.clipboard.writeText(...)。
适用于Chrome和Edge，但不适用于Firefox。当我在该功能中使用它时，
Firefox 也被阻止了。document.execCommand("copy")executeJS(...)

onClick我想我需要向按钮添加一个功能。我怎样才能用 Vaadin 做到这一点？

Answer 1

copyBtn.getElement().executeJs("this.addEventListener('click', e => navigator.clipboard.writeText($0))", textToCopy);

请注意，强烈建议不要使用字符串连接来动态构建传递给的字符串，executeJs因为存在跨站点脚本漏洞的风险。这就是为什么我的建议还使用$0引用单独传递的字符串。这类似于在 SQL 中使用准备好的语句。