Android 기기에서 `navigator.clipboard.writeText` 앞에 `alert()`가 있으면 텍스트를 클립보드에 성공적으로 복사할 수 없는 이유는 무엇입니까?

Question

Android의 Chrome에서 navigator.clipboard.writeText()를 사용하여 일부 텍스트를 복사하려고 할 때 나중에 경고 상자를 표시하지 않는 한 제대로 작동합니다. 경고()를 표시하면 더 이상 작동하지 않습니다.

예를 들어 다음 코드는 예상대로 작동합니다.

function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(copyText.value);
}

<input type="text" value="Hello world" id="myInput" style="width:auto">
<button onclick="myFunction()">복사</button>

그러나 아래 코드는 작동하지 않고, 콘솔에 오류도 발생하지 않으며, PC의 Chrome에서는 제대로 작동하지만 Android에서는 작동하지 않습니다.

function myFunction()
{
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(copyText.value);
  Alert("텍스트가 성공적으로 복사되었습니다.")
}

<input type="text" value="Hello world" id="myInput" style="width:auto" >
<button onclick="myFunction()" >복사</button>

무슨 일이 일어났는지 아는 사람 있나요? 감사해요.

Answer 1

Reasons navigator.clipboard.writetext 작동하지 않는 이유:

1. 호환성 문제: 이 메서드는 document.exec("copy") 메서드가 더 이상 사용되지 않은 후 나중에 추가되었습니다. 일부 브라우저 버전에서는 이 방법이 작동하지 않으므로 이 방법을 사용할 수 있는지 확인해야 합니다.

2. Document Not Focused: 사용자 상호 작용 없이 클립보드에 내용을 쓰면 브라우저가 요청을 차단하고 이 메서드의 Promise에서 오류를 발생시킵니다. 사용자가 인터넷에서 로드한 문자열을 복사하고 싶어한다고 상상해 보세요. (ajax）。如果此 ajax 요청에 시간이 걸리고 브라우저 포커스가 만료되며 내 경험상 복사를 완료할 수 없습니다.

3. 무단 권한: 때때로 사용자는 개인 정보 보호 및 보안 설정을 편집하여 브라우저가 클립보드에 자동으로 복사하는 것을 방지할 수 있습니다. 복사하기 전에 클립보드에 쓸 수 있는 권한을 확인하세요. 그러나 clipboard-write 권한은 활성 탭에 있는 페이지에 자동으로 부여됩니다.

4. 비동기 문제: 클립보드에 복사하는 것은 비동기 작업이므로 코드가 작업을 완료할 때까지 기다려야 합니다.

5. HTTP 웹사이트: 이 기능은 지원되는 일부 또는 모든 브라우저의 보안 컨텍스트(HTTPS)에서만 사용할 수 있습니다.

6. Apple Safari 문제: Apple의 클립보드 API는 대부분의 경우 Promise 在写入剪贴板时。因此，我们可以使用 ClipboardItem 将一个 Promise 传递给 write 方法。我建议您使用 write 而不是 writeText

   을 기대합니다.

말하기 쉽게 보여주세요 Code:

으아악

사용법:

으아악

IMPORTANT: 콘솔이 아닌 버튼과 onclick 이벤트를 통해 테스트하세요.

Answer 2

navigator.clipboard.writeText 메소드가 Promise를 반환하고 코드가 그 결과를 기다리고 있지 않기 때문입니다.

아래 코드에 따라 수정하면 문제가 없을 것입니다.

으아악

Promise 및 Promise和navigator.clipboard.writeText 메소드에 대한 자세한 내용을 보려면 다음 링크를 방문하세요:
JavaScript.info에 대한 약속
MDN의 클립보드와 상호작용