Android 기기에서 `navigator.clipboard.writeText` 앞에 `alert()`가 있으면 텍스트를 클립보드에 성공적으로 복사할 수 없는 이유는 무엇입니까?
P粉386318086
2023-08-22 19:21:37
<p>Android의 Chrome에서 <code>navigator.clipboard.writeText()</code>를 사용하여 일부 텍스트를 복사하려고 할 때 나중에 경고 상자를 표시하지 않는 한 제대로 작동합니다. 경고()를 표시하면 더 이상 작동하지 않습니다. </p>
<p>예를 들어 다음 코드는 예상대로 작동합니다. </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()">복사</button></pre>
<p><br /></p>
<p>그러나 아래 코드는 작동하지 않고, 콘솔에 오류도 발생하지 않으며, PC의 Chrome에서는 제대로 작동하지만 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("텍스트가 성공적으로 복사되었습니다.")
}</pre>
<pre class="brush:html;toolbar:false;"><input type="text" value="Hello world" id="myInput" style="width:auto" >
<button onclick="myFunction()" >복사</button></pre>
<p><br /></p>
<p>무슨 일이 일어났는지 아는 사람 있나요? 감사해요. </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Reasons
navigator.clipboard.writetext작동하지 않는 이유:호환성 문제: 이 메서드는
document.exec("copy")메서드가 더 이상 사용되지 않은 후 나중에 추가되었습니다. 일부 브라우저 버전에서는 이 방법이 작동하지 않으므로 이 방법을 사용할 수 있는지 확인해야 합니다.Document Not Focused: 사용자 상호 작용 없이 클립보드에 내용을 쓰면 브라우저가 요청을 차단하고 이 메서드의 Promise에서 오류를 발생시킵니다. 사용자가 인터넷에서 로드한 문자열을 복사하고 싶어한다고 상상해 보세요. (
ajax）。如果此ajax요청에 시간이 걸리고 브라우저 포커스가 만료되며 내 경험상 복사를 완료할 수 없습니다.무단 권한: 때때로 사용자는 개인 정보 보호 및 보안 설정을 편집하여 브라우저가 클립보드에 자동으로 복사하는 것을 방지할 수 있습니다. 복사하기 전에 클립보드에 쓸 수 있는 권한을 확인하세요. 그러나
clipboard-write권한은 활성 탭에 있는 페이지에 자동으로 부여됩니다.비동기 문제: 클립보드에 복사하는 것은 비동기 작업이므로 코드가 작업을 완료할 때까지 기다려야 합니다.
HTTP 웹사이트: 이 기능은 지원되는 일부 또는 모든 브라우저의 보안 컨텍스트(HTTPS)에서만 사용할 수 있습니다.
Apple Safari 문제: Apple의 클립보드 API는 대부분의 경우
을 기대합니다.Promise在写入剪贴板时。因此，我们可以使用ClipboardItem将一个Promise传递给write方法。我建议您使用 write 而不是writeText말하기 쉽게 보여주세요 Code:
으아악사용법:
으아악IMPORTANT: 콘솔이 아닌 버튼과
onclick이벤트를 통해 테스트하세요.navigator.clipboard.writeText메소드가 Promise를 반환하고 코드가 그 결과를 기다리고 있지 않기 때문입니다.아래 코드에 따라 수정하면 문제가 없을 것입니다.
으아악Promise및Promise和navigator.clipboard.writeText메소드에 대한 자세한 내용을 보려면 다음 링크를 방문하세요:JavaScript.info에 대한 약속
MDN의 클립보드와 상호작용