Bagaimanakah Saya Boleh Menyalin Teks dengan Amanah ke Papan Klip dalam JavaScript Merentasi Pelayar Berbeza?

Menyalin ke Papan Klip dalam JavaScript: Pendekatan Berbilang Penyemak Imbas

Menyalin teks ke papan keratan melibatkan memanfaatkan pelbagai API penyemak imbas. Artikel ini memberi tumpuan kepada tiga kaedah utama:

1. API Papan Klip Async: [navigator.clipboard.writeText]
Dikeluarkan dalam Chrome 66, API Papan Klip Async menyediakan akses tak segerak kepada papan keratan. Ia menggunakan Janji, memastikan gesaan pengguna tidak mengganggu pelaksanaan JavaScript. Kaedah ini memerlukan HTTPS dan menyokong tab tidak aktif dalam Chrome 66.

2. document.execCommand('copy') (Ditamatkan)
Tersedia dalam kebanyakan penyemak imbas sejak 2015, kaedah ini adalah segerak, menyekat pelaksanaan JavaScript. Ia menyalin teks daripada DOM dan meletakkannya pada papan keratan. Sesetengah penyemak imbas mungkin memaparkan gesaan kebenaran semasa proses.

3. Mengatasi Acara Salin
Teknik lanjutan ini membolehkan anda mengubah suai perkara yang muncul pada papan keratan berdasarkan acara salin. Ia tidak diliputi di sini kerana ia tidak langsung menangani penyalinan ke papan keratan.

Nota Pembangunan Am

• Operasi papan keratan secara amnya memerlukan halaman itu aktif atau memerlukan interaksi pengguna.
• Sehingga Februari 2020, IFRAME silang asal dan kotak pasir IFRAME boleh menghalang contoh kod daripada berfungsi dalam sesetengah penyemak imbas.

Async Fallback Approach

Untuk memastikan keserasian merentas penyemak imbas, pertimbangkan untuk menggunakan pendekatan tak segerak yang kembali ke dokumen. execCommand('copy') untuk pelayar lama:

function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(() => {
    console.log('Async: Copying to clipboard was successful!');
  }, (err) => {
    console.error('Async: Could not copy text: ', err);
  });
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyalin Teks dengan Amanah ke Papan Klip dalam JavaScript Merentasi Pelayar Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!