<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>
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#securityAn 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 patil.p...@gmail.com 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 callpublic 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:Support is extremely limited at the moment, but for now I'd be happy to get something working in Chrome:Here's Google's live sample page: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: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: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 google-web-toolkit+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-web-toolkit/9856ced4-a191-499c-9118-edc72ef6831fn%40googlegroups.com.
No comments:
Post a Comment