Mengapa pada peranti Android, jika terdapat `alert()` sebelum `navigator.clipboard.writeText`, ia tidak boleh berjaya menyalin teks ke papan keratan?

Question

Apabila cuba menyalin beberapa teks menggunakan navigator.clipboard.writeText() pada Chrome pada Android, ia berfungsi dengan baik selagi saya tidak menunjukkan kotak amaran selepas itu. Sebaik sahaja saya memaparkan amaran() ia tidak berfungsi lagi.

Sebagai contoh, kod berikut berfungsi seperti yang dijangkakan:

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">
<butang onclick="myFunction()">copy</button>

Walau bagaimanapun kod di bawah tidak berfungsi, tidak menimbulkan sebarang ralat dalam konsol dan berfungsi dengan baik pada Chrome pada PC, tetapi tidak pada Android.

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

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

Adakah sesiapa tahu apa yang berlaku? terima kasih.

Answer 1

Sebab navigator.clipboard.writetext Sebab mengapa ia tidak berkesan:

1. Isu Keserasian: Kaedah ini ditambah kemudian selepas kaedah document.exec("copy") ditamatkan. Dalam beberapa versi pelayar kaedah ini tidak akan berfungsi dan anda harus menyemak sama ada kaedah ini tersedia.

2. Dokumen Tidak Difokuskan: Jika anda menulis kandungan pada papan keratan tanpa sebarang interaksi pengguna, penyemak imbas akan menyekat permintaan anda dan membuang ralat dalam Janji kaedah ini. Bayangkan pengguna ingin menyalin rentetan yang anda muatkan dari internet (ajax）。如果此 ajax Permintaan mengambil sedikit masa, fokus penyemak imbas akan tamat tempoh dan dalam pengalaman saya penyalinan tidak dapat diselesaikan.

3. Kebenaran Tidak Dibenarkan: Kadangkala pengguna boleh menghalang penyemak imbas daripada menyalin secara automatik ke papan keratan dengan mengedit tetapan privasi dan keselamatan mereka. Sebelum menyalin, semak kebenaran untuk menulis ke papan keratan. Walau bagaimanapun, kebenaran clipboard-write diberikan secara automatik kepada halaman apabila ia berada dalam tab aktif.

4. Isu Asynchronous: Menyalin ke papan keratan ialah operasi tak segerak dan anda harus menunggu sehingga kod anda menyelesaikan kerjanya.

5. Tapak Web HTTP: Ciri ini hanya tersedia dalam konteks selamat (HTTPS), dalam beberapa atau semua penyemak imbas yang disokong.

6. Isu Apple Safari: API Papan Klip Apple menjangkakan Promise 在写入剪贴板时。因此，我们可以使用 ClipboardItem 将一个 Promise 传递给 write 方法。我建议您使用 write 而不是 writeText

   dalam kebanyakan kes

Mudah bercakap, tunjukkan saya Kod:

function copy(text) {
    return new Promise((resolve, reject) => {
        if (typeof navigator !== "undefined" && typeof navigator.clipboard !== "undefined" && navigator.permissions !== "undefined") {
            const type = "text/plain";
            const blob = new Blob([text], { type });
            const data = [new ClipboardItem({ [type]: blob })];
            navigator.permissions.query({name: "clipboard-write"}).then((permission) => {
                if (permission.state === "granted" || permission.state === "prompt") {
                    navigator.clipboard.write(data).then(resolve, reject).catch(reject);
                }
                else {
                    reject(new Error("Permission not granted!"));
                }
            });
        }
        else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
            var textarea = document.createElement("textarea");
            textarea.textContent = text;
            textarea.style.position = "fixed";
            textarea.style.width = '2em';
            textarea.style.height = '2em';
            textarea.style.padding = 0;
            textarea.style.border = 'none';
            textarea.style.outline = 'none';
            textarea.style.boxShadow = 'none';
            textarea.style.background = 'transparent';
            document.body.appendChild(textarea);
            textarea.focus();
            textarea.select();
            try {
                document.execCommand("copy");
                document.body.removeChild(textarea);
                resolve();
            }
            catch (e) {
                document.body.removeChild(textarea);
                reject(e);
            }
        }
        else {
            reject(new Error("None of copying methods are supported by this browser!"));
        }
    });
    
}

Penggunaan:

try {
    await copy("Hay yah!");
}
catch(e) {
    console.error(e);
}

PENTING: Uji melalui butang dan onclick acara, bukan dalam konsol.

Answer 2

Kerana kaedah navigator.clipboard.writeText mengembalikan Janji dan kod anda tidak menunggu hasilnya.

Jika anda membetulkannya mengikut kod di bawah, anda sepatutnya baik:

function myFunction() {
    var copyText = document.getElementById("myInput");
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    navigator.clipboard
      .writeText(copyText.value)
      .then(() => {
        alert("成功复制");
      })
      .catch(() => {
        alert("出了点问题");
      });
}

Untuk maklumat lanjut tentang Janji dan kaedah Promise和navigator.clipboard.writeText, sila layari pautan berikut:
Janji di JavaScript.info
Berinteraksi dengan papan keratan di MDN