Bagaimana untuk Menyalin Teks dengan Cekap ke Papan Klip Merentasi Pelbagai Pelayar dalam JavaScript?

Menyalin Teks ke Papan Klip dalam JavaScript untuk Berbilang Penyemak Imbas

Gambaran Keseluruhan: API Mana Yang Perlu Digunakan?

Untuk menyalin teks ke papan keratan, JavaScript menyediakan tiga API pelayar utama:

• Async Clipboard API (navigator.clipboard.writeText):

  • Tersedia dalam Chrome 66
  • Asynchronous dan menggunakan Promises
  • Boleh ditulis untuk mengelakkan gesaan pengguna terganggu
  • Disokong hanya pada HTTPS halaman

• document.execCommand('copy'):

  • Disokong secara meluas merentas penyemak imbas
  • Segerak, menghentikan pelaksanaan halaman sehingga selesai
  • Membaca teks daripada DOM dan letakkannya pada papan keratan

• Mengatasi acara salin:

  • Membenarkan pengubahsuaian kandungan papan keratan untuk sebarang salinan acara
  • Menyokong berbilang format data, di luar biasa teks
  • Tidak ditujukan secara langsung di sini

Nota Pembangunan Am

• Arahan papan klip mungkin tidak berfungsi semasa menguji kod dalam konsol.
• Halaman aktif (untuk API Papan Klip Async) atau interaksi pengguna (untuk document.execCommand('copy')). Contohnya:

Demo dan Kesimpulan

Untuk menguji kod dan melihatnya dalam tindakan, lawati halaman tunjuk cara ini. Ambil perhatian bahawa contoh terbenam mungkin tidak berfungsi kerana isu kebenaran dalam IFRAME.

function fallbackCopyTextToClipboard(text) {
  // ...
}

function copyTextToClipboard(text) {
  if (!navigator.clipboard) fallbackCopyTextToClipboard(text);
  // ...
}

Untuk keserasian merentas penyemak imbas penuh, gunakan API Papan Klip Async apabila disokong dan sandarkan kepada document.execCommand('copy') sebaliknya.

Atas ialah kandungan terperinci Bagaimana untuk Menyalin Teks dengan Cekap ke Papan Klip Merentasi Pelbagai Pelayar dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!