Bagaimanakah Saya Menyalin Teks ke Papan Klip dalam JavaScript Merentas Semua Pelayar?-tutorial js-php.cn

Bagaimanakah Saya Menyalin Teks ke Papan Klip dalam JavaScript Merentas Semua Pelayar?

Susan Sarandon

Lepaskan： 2024-12-28 07:18:53

asal

402 orang telah melayarinya

How Do I Copy Text to the Clipboard in JavaScript Across All Browsers?

Cara Menyalin ke Papan Klip dalam JavaScript (Merentasi Penyemak Imbas)

Ikhtisar

Kepada salin teks ke papan keratan, anda boleh menggunakan tiga pelayar utama API:

Async Clipboard API (navigator.clipboard.writeText)
document.execCommand('copy') (ditamatkan)
Mengatasi Salinan Acara

Pertimbangan Pembangunan Umum

Lumpuhkan kefungsian papan keratan semasa menguji kod dalam konsol.
Halaman mestilah aktif (Async Clipboard API) atau memerlukan interaksi pengguna (document.execCommand('copy')) untuk mengakses papan keratan.

Pelaksanaan

Async Fallback

Untuk liputan penyemak imbas terbaik, gabungkan API Papan Klip Async dengan sandaran kepada document.execCommand('copy'):

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);
  });
}

Salin selepas log masuk

Clipboard API Perbandingan

API

Ciri

Sokongan

API	Features	Support
Async Clipboard API	Text-focused, asynchronous, supports HTTPS	Chrome 66 (March 2018), works in inactive tabs
document.execCommand('copy')	Synchronous, reads text from DOM	Most browsers (as of April 2015), displays permission prompts
Overriding the Copy Event	Can modify clipboard content from any copy event, supports various data formats	Not directly related to the question

Papan Klip Async API

Tertumpu teks, tak segerak, menyokong HTTPS

Chrome 66 (Mac 2018), berfungsi dalam tab tidak aktif

document.execCommand('copy')

Synchronous, membaca teks daripada DOM

Kebanyakan penyemak imbas (sehingga April 2015), memaparkan gesaan kebenaran

Mengatasi Acara Salin

Boleh mengubah suai kandungan papan keratan daripada sebarang acara penyalinan, menyokong pelbagai format data

Tidak berkaitan secara langsung dengan soalan

Nota (2020/02/20)Kebenaran yang ditamatkan menghalang coretan kod daripada berfungsi dalam sesetengah penyemak imbas . Gunakan halaman web aktif yang disampaikan melalui HTTPS untuk ujian dan pembangunan.

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