Apologies. That stackoverflow example gets blocked due to cross origin.
Just ran a simple test:
<html>
<script>
async function readClipboard () {
if (!navigator.clipboard) {
// Clipboard API not available
return
}
try {
const text = await navigator.clipboard.readText();
document.querySelector('.clipboard-content').innerText = text;
} catch (err) {
console.error('Failed to copy!', err)
}
}
function updateClipboard() {
// Here You Can Debug without DomException
debugger
const clipboard = document.querySelector('.clipboard-content').innerText;
document.querySelector('.clipboard-content').innerText = 'Updated => ' +
clipboard;
}
</script>
<body>
<button onclick="readClipboard()">Paste</button>
<p class="clipboard-content"></p>
<button onclick="updateClipboard()">Edit</button>
</body>
</html>
and it worked fine (browser popped up a message asking for permission).
On Thursday, 29 December 2022 at 5:02:34 pm UTC+11 Craig Mitchell wrote:
> Browsers now need you to get your users to grant permissions in their
> browsers for this to work. See "Permissions API" here:
> https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/readText#security
>
>
> An example: https://stackoverflow.com/a/59954231/418057 When I run the
> code snippet, and press "paste", it give "NotAllowedError".
>
> On Monday, 26 December 2022 at 5:02:32 pm UTC+11 [email protected]
> wrote:
>
>> Hi Experts,
>> I am newbie with javascript and GWT, I want my function to return
>> clipboard data,for further use in application upon click of(tool button).
>> Is there any way to get the text read from clipboard, I am looking
>> something similar @Jim Douglas mentioned, with
>> $wnd.navigator.clipboard.readText() is working but I need the "pasted" text
>> to be returned to my native method call
>>
>> public static native String readText(){
>> try{
>> if($wnd.navigator.clipboard){
>> var promise= $wnd.navigator.clipboard.readText();
>> var resolve =function(text){
>> console.log(text); // i want this text which i can see on
>> console(string) to be returned , Is it possible and how to achieve it any
>> hack to ge
>> }
>> }
>> }
>> }
>>
>> Please help, as i got stuck at this point for a while. Thanks.
>> On Wednesday, 16 October 2019 at 19:53:27 UTC+5:30 Jim Douglas wrote:
>>
>>> Oh wow, I completely missed that. Of course *navigator* is really
>>> *window.navigator*. JavaScript sample code almost always references
>>> *navigator*, not *window.navigator*, and I rarely think of that detail.
>>> Even after staring at that code for hours looking for something I might
>>> have missed, that never occurred to me. Thanks, Thomas; that's exactly what
>>> I was missing. With that simple change, this now works.
>>>
>>>
>>> On Wednesday, October 16, 2019 at 5:44:05 AM UTC-7, Thomas Broyer wrote:
>>>>
>>>> Have you tried with $wnd.navigator.clipboard?
>>>>
>>>> On Tuesday, October 15, 2019 at 10:40:04 PM UTC+2, Jim Douglas wrote:
>>>>>
>>>>> Ok, there are a few moving parts to this. Keeping it as short as
>>>>> possible, this is the new Clipboard API:
>>>>>
>>>>> https://developer.mozilla.org/en-US/docs/Web/API/Clipboard
>>>>>
>>>>> Support is extremely limited at the moment, but for now I'd be happy
>>>>> to get something working in Chrome:
>>>>>
>>>>> https://caniuse.com/#feat=mdn-api_clipboard
>>>>>
>>>>> Here's Google's live sample page:
>>>>>
>>>>> https://googlechrome.github.io/samples/async-clipboard/index.html
>>>>>
>>>>> For obvious reasons, there's a lot of paranoid security around
>>>>> JavaScript access to the clipboard. This is the specific detail I'm
>>>>> running
>>>>> into:
>>>>>
>>>>>
>>>>> https://stackoverflow.com/questions/56306153/domexception-on-calling-navigator-clipboard-readtext
>>>>>
>>>>> These APIs throw a security exception if document.hasFocus() is false.
>>>>> And I'm not seeing any way to honour that rule in a GWT app. In my
>>>>> production app, and in a tiny standalone GWT app I just generated for
>>>>> testing purposes, document.hasFocus() is always false ($doc.hasFocus() is
>>>>> true).
>>>>>
>>>>> For testing purposes, I generated the GWT StockWatcher demo app:
>>>>>
>>>>> http://www.gwtproject.org/doc/latest/tutorial/create.html
>>>>>
>>>>> Then I added some UI hooks for clipboard testing elements in
>>>>> StockWatcher.html:
>>>>>
>>>>> <h1>Web Application Starter Project</h1>
>>>>>
>>>>>
>>>>> <table align=*"center"*>
>>>>>
>>>>> <tr>
>>>>>
>>>>> <td colspan=*"2"* style="font-weight:*bold*;">Please enter
>>>>> your name:</td>
>>>>>
>>>>> </tr>
>>>>>
>>>>> <tr>
>>>>>
>>>>> <td id=*"nameFieldContainer"*></td>
>>>>>
>>>>> <td id=*"sendButtonContainer"*></td>
>>>>>
>>>>> </tr>
>>>>>
>>>>> <tr>
>>>>>
>>>>> <td colspan=*"2"* style="color:*red*;" id=
>>>>> *"errorLabelContainer"*></td>
>>>>>
>>>>> </tr>
>>>>>
>>>>> <tr>
>>>>>
>>>>> <td id=*"readTextField"*></td>
>>>>>
>>>>> <td id=*"readTextButton"*></td>
>>>>>
>>>>> </tr>
>>>>>
>>>>> <tr>
>>>>>
>>>>> <td id=*"writeTextField"*></td>
>>>>>
>>>>> <td id=*"writeTextButton"*></td>
>>>>>
>>>>> </tr>
>>>>>
>>>>> </table>
>>>>>
>>>>> And minimal testing UI in StockWatcher.java onModuleLoad:
>>>>>
>>>>> TextBox readText = *new* TextBox();
>>>>>
>>>>> readText.setText("readText");
>>>>>
>>>>> Button readTextButton = *new* Button("readText");
>>>>>
>>>>>
>>>>> TextBox writeText = *new* TextBox();
>>>>>
>>>>> writeText.setText("writeText");
>>>>>
>>>>> Button writeTextButton = *new* Button("writeText");
>>>>>
>>>>>
>>>>>
>>>>> RootPanel.*get*("readTextField").add(readText);
>>>>>
>>>>> RootPanel.*get*("readTextButton").add(readTextButton);
>>>>>
>>>>>
>>>>>
>>>>> RootPanel.*get*("writeTextField").add(writeText);
>>>>>
>>>>> RootPanel.*get*("writeTextButton").add(writeTextButton);
>>>>>
>>>>> readTextButton.addClickHandler(*new* ClickHandler()
>>>>>
>>>>> {
>>>>>
>>>>> *public* *void* onClick(ClickEvent event)
>>>>>
>>>>> {
>>>>>
>>>>> readText();
>>>>>
>>>>> }
>>>>>
>>>>> });
>>>>>
>>>>>
>>>>>
>>>>> writeTextButton.addClickHandler(*new* ClickHandler()
>>>>>
>>>>> {
>>>>>
>>>>> *public* *void* onClick(ClickEvent event)
>>>>>
>>>>> {
>>>>>
>>>>> writeText(writeText.getText());
>>>>>
>>>>> }
>>>>>
>>>>> });
>>>>>
>>>>> And corresponding JSNI functions to attempt to invoke the Clipboard
>>>>> API:
>>>>>
>>>>>
>>>>>
>>>>> *public* *native* *void* readText()
>>>>>
>>>>> /*-{
>>>>>
>>>>> try
>>>>>
>>>>> {
>>>>>
>>>>> if (navigator.clipboard)
>>>>>
>>>>> {
>>>>>
>>>>> console.log('navigator.clipboard.readText()');
>>>>>
>>>>> console.log('document.hasFocus()='
>>>>> +document.hasFocus());
>>>>>
>>>>> console.log('$doc.hasFocus()='+$doc.hasFocus());
>>>>>
>>>>> var promise = navigator.clipboard.readText();
>>>>>
>>>>> var resolve = function(text) {
>>>>>
>>>>> console.log(text);
>>>>>
>>>>> };
>>>>>
>>>>> var reject = function(reason) {
>>>>>
>>>>> console.log('navigator.clipboard.readText failed:
>>>>> '+reason);
>>>>>
>>>>> };
>>>>>
>>>>> promise["catch"](reject);
>>>>>
>>>>> promise.then(resolve,reject)["catch"](reject);
>>>>>
>>>>> }
>>>>>
>>>>> else
>>>>>
>>>>> {
>>>>>
>>>>> console.log('This browser does not support
>>>>> navigator.clipboard.');
>>>>>
>>>>> }
>>>>>
>>>>> }
>>>>>
>>>>> catch (e)
>>>>>
>>>>> {
>>>>>
>>>>> console.error(e,e.stack);
>>>>>
>>>>> }
>>>>>
>>>>> }-*/;
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> *public* *native* *void* writeText(String p_text)
>>>>>
>>>>> /*-{
>>>>>
>>>>> try
>>>>>
>>>>> {
>>>>>
>>>>> var _this = this;
>>>>>
>>>>> if (navigator.clipboard)
>>>>>
>>>>> {
>>>>>
>>>>> console.log('navigator.clipboard.writeText()');
>>>>>
>>>>> console.log('document.hasFocus()='
>>>>> +document.hasFocus());
>>>>>
>>>>> console.log('$doc.hasFocus()='+$doc.hasFocus());
>>>>>
>>>>> var promise = navigator.clipboard.writeText(p_text);
>>>>>
>>>>> var resolve = function(text) {
>>>>>
>>>>> console.log('navigator.clipboard.writeText '
>>>>> +text);
>>>>>
>>>>> };
>>>>>
>>>>> var reject = function(reason) {
>>>>>
>>>>> console.log('navigator.clipboard.writeText
>>>>> failed: '+reason);
>>>>>
>>>>> };
>>>>>
>>>>> promise["catch"](reject);
>>>>>
>>>>> promise.then(resolve,reject)["catch"](reject);
>>>>>
>>>>> }
>>>>>
>>>>> else
>>>>>
>>>>> {
>>>>>
>>>>> console.log('This browser does not support
>>>>> navigator.clipboard.');
>>>>>
>>>>> }
>>>>>
>>>>> }
>>>>>
>>>>> catch (e)
>>>>>
>>>>> {
>>>>>
>>>>> console.error(e,e.stack);
>>>>>
>>>>> }
>>>>>
>>>>> }-*/;
>>>>>
>>>>> And I'm stuck on the same security error noted in that StackOverflow
>>>>> question, but with no obvious way to satisfy that requirement:
>>>>>
>>>>> navigator.clipboard.readText()
>>>>>
>>>>> document.hasFocus()=false
>>>>>
>>>>> $doc.hasFocus()=true
>>>>>
>>>>> navigator.clipboard.readText failed: NotAllowedError: Document is not
>>>>> focused.
>>>>>
>>>>>
>>>>> navigator.clipboard.writeText()
>>>>>
>>>>> document.hasFocus()=false
>>>>>
>>>>> $doc.hasFocus()=true
>>>>>
>>>>> navigator.clipboard.writeText failed: NotAllowedError: Document is not
>>>>> focused.
>>>>>
>>>>>
>>>>>
>>>>> Is there any way to make this work in GWT?
>>>>>
>>>>
--
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-web-toolkit/9856ced4-a191-499c-9118-edc72ef6831fn%40googlegroups.com.
