Warum kann auf Android-Geräten Text nicht erfolgreich in die Zwischenablage kopiert werden, wenn „alert()' vor „navigator.clipboard.writeText' steht?
P粉386318086
2023-08-22 19:21:37
<p>Wenn ich versuche, Text mit <code>navigator.clipboard.writeText()</code> in Chrome auf Android zu kopieren, funktioniert es einwandfrei, solange ich das Warnfeld danach nicht zeige. Sobald ich einen Alert() anzeige, funktioniert es nicht mehr. </p>
<p>Der folgende Code funktioniert beispielsweise wie erwartet: </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>Der folgende Code funktioniert jedoch nicht, löst keine Fehler in der Konsole aus und funktioniert einwandfrei auf Chrome auf dem PC, jedoch nicht auf 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 erfolgreich kopiert")
}</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>Weiß jemand, was passiert ist? Danke. </p>
原因
navigator.clipboard.writetext
不起作用的原因:兼容性问题:在废弃了
document.exec("copy")
方法后,此方法是后来添加的。在 某些浏览器版本 中,此方法将不起作用,您应该检查此方法是否可用。文档未聚焦:如果您在没有任何用户交互的情况下将内容写入剪贴板,浏览器将阻止您的请求,并在此方法的 Promise 中抛出错误。想象一下,用户想要复制一个您从互联网上加载的字符串(
ajax
)。如果此ajax
请求花费了一点时间,浏览器的焦点将会过期,我的经验是无法完成复制。未授权的权限:有时用户可能通过编辑其隐私和安全设置来阻止浏览器自动复制到剪贴板。在进行复制之前,请检查写入剪贴板的权限。但是,当页面处于活动选项卡时,
clipboard-write
权限会自动授予页面。异步问题:复制到剪贴板是一个异步操作,您应该等待您的代码完成工作。
HTTP 网站:此功能仅在安全上下文(HTTPS)中可用,在某些或所有支持的浏览器中。
Apple Safari 问题:苹果的 Clipboard API 大多数情况下期望一个
Promise
在写入剪贴板时。因此,我们可以使用ClipboardItem
将一个Promise
传递给write
方法。我建议您使用 write 而不是writeText
说话容易,展示给我 代码:
用法:
重要提示:通过按钮和
onclick
事件进行测试,而不是在控制台中。因为
navigator.clipboard.writeText
方法返回一个Promise,而你的代码没有等待它的结果。如果你按照下面的代码进行修正,应该就没问题了:
有关
Promise
和navigator.clipboard.writeText
方法的更多信息,请访问以下链接:JavaScript.info上的Promise
MDN上与剪贴板交互