Bagaimanakah Saya Boleh Menyalin Teks dengan Cekap ke Papan Klip dalam JavaScript?

Menyalin ke Papan Klip dalam JavaScript

Gambaran Keseluruhan Umum

Untuk menyalin teks ke papan keratan dalam JavaScript, terdapat tiga API utama:

1. Async Papan Klip Async (navigator.clipboard.writeText):

   • API Utama untuk Chrome 66 dan ke atas (Mac 2018).
   • Akses tak segerak menggunakan Janji JavaScript, memastikan pengalaman pengguna yang lancar.
   • Teks boleh disalin terus daripada a pembolehubah.
   • Memerlukan HTTPS untuk mengakses papan keratan.

2. document.execCommand('copy'):

   • Ditamatkan tetapi disokong secara meluas.
   • Akses segerak, menghentikan JavaScript pelaksanaan sehingga penyalinan selesai.
   • Teks dibaca daripada DOM dan diletakkan pada papan keratan.
   • Boleh memaparkan gesaan keselamatan semasa ujian dalam konsol.

3. Mengatasi Salinan Acara:

   • Membenarkan pengubahsuaian data papan keratan daripada sebarang acara penyalinan.
   • Menyokong berbilang format data melangkaui teks biasa.

Pembangunan Nota

• Arahan berkaitan papan klip mungkin tidak berfungsi dalam ujian konsol. Interaksi halaman atau tab aktif selalunya diperlukan.
• Disebabkan penamatan kebenaran silang asal dalam IFRAME, demo terbenam mungkin tidak berfungsi dalam penyemak imbas seperti Chrome dan Microsoft Edge.

Async Plus Fallback

Menggabungkan API Papan Klip Async dengan sandaran kepada document.execCommand('copy') memastikan sokongan penyemak imbas yang luas:

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

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