Why on Android devices, if there is `alert()` before `navigator.clipboard.writeText`, it cannot successfully copy text to the clipboard?
P粉386318086
2023-08-22 19:21:37
<p>When trying to copy some text using <code>navigator.clipboard.writeText()</code> on Chrome on Android, it works fine as long as I don't show the alert box afterwards. Once I display an alert() it doesn't work anymore. </p>
<p>For example, the following code works as expected: </p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
}</pre>
<pre class="brush:html;toolbar:false;"><input type="text" value="Hello world" id="myInput" style="width:auto">
<button onclick="myFunction()">copy</button></pre>
<p><br /></p>
<p>However the code below does not work, does not throw any errors in the console, and works fine on Chrome on PC, but not on Android. </p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">function myFunction()
{
var copyText = document.getElementById("myInput");
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
alert("Text copied successfully")
}</pre>
<pre class="brush:html;toolbar:false;"><input type="text" value="Hello world" id="myInput" style="width:auto" >
<button onclick="myFunction()" >copy</button></pre>
<p><br /></p>
<p>Does anyone know what happened? Thanks. </p>
Reasons
navigator.clipboard.writetext
Reasons why it doesn’t work:Compatibility issue: This method was added later after the
document.exec("copy")
method was deprecated. In certain browser versions this method will not work and you should check if this method is available.Document not focused: If you write content to the clipboard without any user interaction, the browser will block your request and throw a Promise in this method mistake. Imagine that the user wants to copy a string (
ajax
) that you loaded from the internet. If thisajax
request takes a while, the browser focus will expire and my experience is that the copy cannot be completed.Unauthorized Permissions: Sometimes users may prevent the browser from automatically copying to the clipboard by editing their privacy and security settings. Before copying, check permissions to write to the clipboard. However,
clipboard-write
permission is automatically granted to the page when it is in the active tab.Async Issues: Copying to the clipboard is an asynchronous operation, you should wait for your code to finish its work.
HTTP Website: This feature is only available in a secure context (HTTPS), in some or all supported browsers.
Apple Safari Issue: Apple's Clipboard API most of the time expects a
Promise
when writing to the clipboard. Therefore, we can useClipboardItem
to pass aPromise
to thewrite
method. I suggest you use write instead ofwriteText
Easy to talk, show me Code:
usage:
Important Tip: Test via buttons and
onclick
events, not in the console.Because the
navigator.clipboard.writeText
method returns a Promise, and your code does not wait for its result.If you correct it according to the following code, you should be fine:
For more information about the
Promise
andnavigator.clipboard.writeText
methods, please visit the following link:Promise on JavaScript.info
Interacting with the clipboard on MDN