How to copy to clipboard with GWT?

Question

Couldn't find anything on this with a Google Search.

Does anyone know how to copy some text to the clipboard through GWT Java code? I'd like to avoid the raw javascript injection solution.

Any help or pointers appreciated.

Answer 1

I have used ZeroClipboard with GWT (as suggested by Alexander) but it was not straightforward.

See http://blog.dandoy.org/2011/09/using-zeroclipboard-with-gwt.html

Answer 2

The following code worked fine for me in chrome:

public static native void copyToClipboard() /*-{
    var selection = $wnd.getSelection();
    var text =  $doc.getElementById("myElement");
    var range = $doc.createRange();
    range.selectNodeContents(text);
    selection.removeAllRanges();
    selection.addRange(range);
    $doc.execCommand('copy');
    selection.removeAllRanges();
}-*/;

Answer 3

Here a solution without native JS, but gwt elemental instead, still inspired by @SushmithaShenoy, leaving this here for future reference.

precondition:

import elemental.client.Browser;
import elemental.html.Selection;
import elemental.ranges.Range;

Label.getElement().setAttribute("id","your_element_id"); //unique ID!

now the 'real' code, maybe placed in a clickhandler:

final Selection selection = Browser.getWindow().getSelection();
final Range range = Browser.getDocument().createRange();
range.selectNodeContents(Browser.getDocument().getElementById(""you_elements_id"));
selection.removeAllRanges();
selection.addRange(range);
Browser.getWindow().getDocument().execCommand("copy", false, "");
selection.removeAllRanges();

Answer 4

For the moment it doesn't seem like there are any GWT libraries that provide this functionality. In any case, it's impossible to support this in all browsers as Flash is needed. A rather nice library than wraps the functionality is ZeroClipboard.

Answer 5

Just wrap the provided answer https://stackoverflow.com/a/30810322/106261.

So, you pass in any text to a javascript native function/method, the js function creates a new element and copies to clipboard, and removes the element after copying.

No need for any libs with new browsers.

so :

public static native void copyTextToClipboard(String text) /*-{
        var textArea = document.createElement("textarea");
        //
        // *** This styling is an extra step which is likely not required. ***
        //
        // Why is it here? To ensure:
        // 1. the element is able to have focus and selection.
        // 2. if element was to flash render it has minimal visual impact.
        // 3. less flakyness with selection and copying which **might** occur if
        //    the textarea element is not visible.
        //
        // The likelihood is the element won't even render, not even a flash,
        // so some of these are just precautions. However in IE the element
        // is visible whilst the popup box asking the user for permission for
        // the web page to copy to the clipboard.
        //

        // Place in top-left corner of screen regardless of scroll position.
        textArea.style.position = 'fixed';
        textArea.style.top = 0;
        textArea.style.left = 0;

        // Ensure it has a small width and height. Setting to 1px / 1em
        // doesn't work as this gives a negative w/h on some browsers.
        textArea.style.width = '2em';
        textArea.style.height = '2em';

        // We don't need padding, reducing the size if it does flash render.
        textArea.style.padding = 0;

        // Clean up any borders.
        textArea.style.border = 'none';
        textArea.style.outline = 'none';
        textArea.style.boxShadow = 'none';

        // Avoid flash of white box if rendered for any reason.
        textArea.style.background = 'transparent';


        textArea.value = text;

        document.body.appendChild(textArea);

        textArea.select();

        try {
            var successful = document.execCommand('copy');
        } catch (err) {
            console.log('Unable to copy');
        }
        document.body.removeChild(textArea);
    }-*/;

Answer 6

GWT doesn't natively support the $doc.execCommand('copy'); command, but it's super easy.

First set the focus on the item, select the text, then copy it.

myTextBox.setFocus(true);
myTextBox.selectAll();
boolean success = copyToClipboard();

private static native boolean copyToClipboard() /*-{
    return $doc.execCommand('copy');
}-*/;