2

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

kushal Baldev
  • 729
  • 1
  • 14
  • 37
  • What do you want to copy exactly? Where would you want to paste it? – ollitietavainen Nov 23 '19 at 09:31
  • @ollitietavainen I just want to copy the the content from the textField which can be link or any content and user would paste it on browser to search for it.But could run in all browsers. Mainly chrome firefox and safari. – kushal Baldev Nov 23 '19 at 15:14
  • Unclear. (A) Do you want the user to be able to copy text displayed on screen? That is a built-in feature of the web browser, so you need do nothing. Or… (B) Do you want to programmatically copy paste the contents of widgets such as `TextField`? If so, rather than use the browser's `Edit` > `Copy`/`Paste` feature, your Java code running on the server has access to all the Java objects representing those widgets, and can get/set the value of those widget objects. See: [`TextField::getValue`](https://vaadin.com/api/platform/14.0.13/com/vaadin/flow/component/textfield/TextField.html#getValue--) – Basil Bourque Nov 24 '19 at 07:04
  • @BasilBourque I am looking like when the user clicks the vaadin button it should copy text from the given component say text field and must be able to paste that content anywhere whether on the browser search window or in notepad etc. – kushal Baldev Nov 24 '19 at 08:16
  • So you 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? If so, edit your Question to make that clear. – Basil Bourque Nov 24 '19 at 08:27
  • Sure @BasilBourque..!! Exactly you said is correct..!! I am editing right now thanks. – kushal Baldev Nov 24 '19 at 14:05
  • Similar: [*Copy text to clipboard in vaadin 8*](https://stackoverflow.com/q/56076092/642706) – Basil Bourque Nov 26 '19 at 21:08

1 Answers1

5

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

ollitietavainen
  • 3,900
  • 13
  • 30
  • I guess this might be related: https://stackoverflow.com/a/34046084/3608089 ; unfortunately, I don't have an iOS device to test with. – ollitietavainen Nov 26 '19 at 07:48