Modern browsers support for Copyclipboard functionality

201 views
Skip to first unread message

Pramod Patil

unread,
Oct 20, 2022, 2:18:33 AM10/20/22
to GWT Users
Hi All,
In our GWT application we are using Java native method call for Copytoclipboard functionality. Please refer below code

public static native String getClipboardData()/*-{
if($wnd.clipboardData && clipboardData.setData){
return $wnd.clipboardData.getData('Text');
}
}
}-*/ 
public static native String setClipboardData(String data)/*-{
if($wnd.clipboardData && clipboardData.setData){
return $wnd.clipboardData.setData('Text',Data);
}
}
}-*/ 

So above code is working fine with IE browser but not working with modern browser. I know this is not GWT specific question, but I don't have much knowledge with Javascript, so anyone who knows Javascript, please help here.



Vassilis Virvilis

unread,
Oct 20, 2022, 3:06:54 AM10/20/22
to google-we...@googlegroups.com
For non IE browsers I have this:

            // attach event listeners
            // copy - cut - paste handlers
            ((Element) Js.cast(getElement())).addEventListener("copy", copy_li);
            ((Element) Js.cast(getElement())).addEventListener("cut", cut_li);
            ((Element) Js.cast(getElement())).addEventListener("paste", paste_li);


where (Element) is elemental2.dom.Element

copy_li is something like this:

        final elemental2.dom.EventListener copy_li = new elemental2.dom.EventListener() {
            @Override
            public void handleEvent(elemental2.dom.Event evt) {
                final ClipboardEvent event = Js.cast(evt);
                copy(event);
            }
        };

where ClipboardEvent is elemental2.dom.ClipboardEvent

I need a copy function because I reuse it in the "Cut" functionality also.

and finally copy is something like this

   private void copy(ClipboardEvent event) {
        if (!hasData()) {  // <-- hasData() is your application specific function
            return;
        }

        // do application stuff get/iterate and finally get the data in a String form somehow...
        final String data = getData();  // application specific

        event.clipboardData.setData("text/plain", data);
        event.preventDefault();
    }

Similarly the paste evenListener:

        final elemental2.dom.EventListener paste_li = new elemental2.dom.EventListener() {
            @Override
            public void handleEvent(elemental2.dom.Event evt) {
                final ClipboardEvent event = Js.cast(evt);
                final String data = event.clipboardData.getData("text/plain")
                event.preventDefault();
                if (data == null)
                    return;

                // now you need somehow to propagate data to the interesting parties (methods, classes etc)
                // I am using the EventBus from GWT
                getEventBus().fireEvent(new PasteEvent(data));
            }
        };

Hope that helps

     Vassilis
--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-web-toolkit/c7ebae01-b41f-440a-b4da-b6c1c91231e3n%40googlegroups.com.


--
Vassilis Virvilis

Pramod Patil

unread,
Oct 20, 2022, 4:12:52 AM10/20/22
to google-we...@googlegroups.com
Hi Thanks for your response, 
on both front at GWT and Javascript  I am at beginners level, will it be possible to have modification in below function, which will support copyclipboard functionality with Microsoft Edge. I tried navigator.clipboard.writeText() but code is not getting compiled.
public static native String getClipboardData()/*-{
if($wnd.clipboardData && clipboardData.setData){
return $wnd.clipboardData.getData('Text');
}


--
Thanks and regards,
 Pramod Patil
 Contact +91-8975432800

Vassilis Virvilis

unread,
Oct 20, 2022, 5:22:22 AM10/20/22
to google-we...@googlegroups.com
Well if I remember correctly it is not supposed to access the clipboard directly because that would be a huge security issue.

Consider the following scenario. You copy / paste your password for your bank somewhere. Then you go to a random webpage. If the javascript of this webpage that runs on your computer/browser could access (getClipboardData()) your clipboard your bank password would be compromised.

So you can only access the clipboard from inside an event handler that handles the "copy" event aka Ctrl+C.

The necessary details to access the data differ from IE and so I have posted examples.

I do not know why your code does not compile. I think native methods are not checked so they tend to give NULL errors during runtime. If that is your case then caniuse is your friend.

    Vassilis





--
Vassilis Virvilis

Pramod Patil

unread,
Oct 20, 2022, 6:52:51 AM10/20/22
to GWT Users
Thank you again, I understand security implications but objective is to make it work for Edge, I have control over native methods, getClipBoardata and setClipboardData(String data)  which are native methods in java. The code which I have pasted above is working fine with IE browser, but not with modern browsers. So can you help me with the code/pointers which can replace above code and work for Edge,Chrome. Thanks.

Vassilis Virvilis

unread,
Oct 20, 2022, 7:48:25 AM10/20/22
to google-we...@googlegroups.com
I believe I did

It's this snippet for copy

event.clipboardData.setData("text/plain", data);



--
Vassilis Virvilis

Pramod Patil

unread,
Oct 20, 2022, 12:47:20 PM10/20/22
to google-we...@googlegroups.com
Thanks again,
In below method - how to get "event " ?  so as to use event.clipboard.setData("text/plain", data), if I can get event handle then I may achieve desired results. 

public static native String setClipboardData(String data)/*-{

if($wnd.clipboardData && clipboardData.setData){
return $wnd.clipboardData.setData('Text',Data);
}
}
}-

Vassilis Virvilis

unread,
Oct 22, 2022, 5:10:57 AM10/22/22
to google-we...@googlegroups.com
Well it's the event "copy" as in my example. You need an eventHandler and then the event is passed as argument to your handler.

Hope that helps.



--
Vassilis Virvilis

Craig Mitchell

unread,
Oct 25, 2022, 8:50:45 PM10/25/22
to GWT Users
The  doc.execCommand('copy'), while deprecated, still works.  Eg:

@UiField TextBox myTextBox;

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

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

If you run your site over HTTPS, the user grants permissions, and you jump though lots of hoops, you can also use the $wnd.clipboardData.readText() and $wnd.clipboardData.writeText(myText).

Pramod Patil

unread,
Nov 2, 2022, 1:27:35 AM11/2/22
to google-we...@googlegroups.com
Thanks  Vassilis,   Craig for your responses, as I mentioned I am a beginner with these things, I would like to put exact flow in my application, maybe then I may get some specific help,
1. We have tool button- with name "Paste from excel"  on click of it below code gets called
    protected Function pasteFromExcelFunction =new Function(){
    public void execute(){
     if(readOnly){
     return;
     }// its false
    try{
         if(pasteFromExcelHelper.pasteDataIntoGrid(BaseEditorGridPanel.this, getRecordDef()));
           doAfterPaste();
   }
    }
  }

2. public boolean pasteDataIntoGrid(BaseEditorGridPanel grid, BaseGridRecordDef recordDef)

    {
      boolean pasteSuccessful=true;
     String pastedText= readFromClipboard(); // this method calls the javascript code like below in point 3
     //further code goes here
     }
3 .private String readFromClipboard (){
    return JavaScriptUtils.getClipboardData();
   }
4.
public static native String getClipboardData()/*-{
if($wnd.clipboardData && clipboardData.setData){
return $wnd.clipboardData.getData('Text');
}

So can you please suggest me the code change in above function  point no.4 which will enable paste support with modern browsers, I am aware I am asking very specific things, but I have constraints that I am not able to debug as remote server where gwt code deployed needs some configuration and code is using old version of GWT

Thanks.

Vassilis Virvilis

unread,
Nov 2, 2022, 4:30:36 AM11/2/22
to google-we...@googlegroups.com
The problem is that reading from the clipboard is a great security threat and browsers are reluctant to let you do it.I have managed to access the clipboard both read/write through an event handler because a Ctrl+C, Ctrl+V is an explicit way for the browser to confirm that is is indeed a user desired action and not the action of an evil website page.

As Craig said maybe there is a way to relax browser security but I haven't done so I don't really know.

Look at MDN: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/read says tha firefox asks explicitely which is a scary user experience for end usres.

That's all I know...



--
Vassilis Virvilis

Pramod Patil

unread,
Dec 23, 2022, 12:18:23 PM12/23/22
to google-we...@googlegroups.com
Hi @Vassilis Virvilis, Can you please help me with how to use elemental2 api, if you can share any reference document about which dependency to add, what should I add to <inherit names=""> etc.  How to use  listeners -> ((Element) Js.cast(getElement())).addEventListener("paste", paste_li); in my case I have a toolbox button like below code, basically a callback attached when one clicks on it. So how to add an eventListener ? I tried to explore myself about this but I didn't get much information. If you can share these details it would be great help as you have already done. Thank you !!
   protected Function pasteFromExcelFunction =new Function(){
    public void execute(){}
}

On Thu, Oct 20, 2022 at 12:36 PM Vassilis Virvilis <vas...@gmail.com> wrote:
Reply all
Reply to author
Forward
0 new messages