CODEWITHSUNDEEP
javavaadinvaadin-flow
kushal Baldev
kushal Baldev

Reputation: 769

Copy to clipboard component in vaadin 14

I want copy to clipboard component in vaadin 14 or else how can I prepare for it?

I want to program a button in Vaadin that copies the text content of a specific Vaadin widget such as TextField, placing that text onto the OS’ clipboard so that the user might later paste that text somewhere else, possibly in another app

Upvotes: 2

Views: 2610

Answers (1)

ollitietavainen
ollitietavainen

Reputation: 4290

Some background: browsers can be a bit protective of what kind of content can be copied to the clipboard programmatically. In order to keep the operation functional across all browsers, the copied content must come from a visible element in the DOM and the copy-to-clipboard action must happen as a direct result of a user action, like a mouse click or a keyboard event. In other words, you can't just execute a simple JavaScript function to copy content to the clipboard.

To get this working in Vaadin 14, here is an add-on which may help you: https://vaadin.com/directory/component/clipboardhelper/overview

Usage example:

        Button button = new Button("click this button to copy some stuff to the clipboard");
        ClipboardHelper clipboardHelper = new ClipboardHelper("some stuff", button);
        add(clipboardHelper); // ClipboardHelper wraps the Button

The relevant sources can be found here: https://github.com/OlliTietavainenVaadin/clipboardhelper/blob/master/src/main/resources/META-INF/resources/frontend/clipboard-helper.js

Upvotes: 5

Related Questions