Tiga cara menyalin konten halaman dengan JavaScript (berbagi ringkasan)

Ada banyak plug-in pihak ketiga yang dapat mengimplementasikan fungsi copy, namun jika kita melakukannya sendiri, apakah kita tahu cara mengimplementasikannya?

Artikel ini memperkenalkan tiga opsi penerapan.

Metode 1: Async Clipboard API

Menggunakan Async Clipboard API

Cara ini paling mudah digunakan, namun kompatibilitasnya kurang baik dan banyak persyaratannya.

Contoh kode:

const janji = navigator.clipboard.writeText(newClipText);

Perhatikan bahwa nilai kembalian metode ini adalah Janji. Dan saat menggunakan metode ini, halaman harus fokus, jika tidak, kesalahan akan dilaporkan.

Metode 2: Document.execCommand API

menggunakan Document.execCommand.

Meskipun metode ini telah ditinggalkan dan tidak lagi menjadi standar web, metode ini memiliki banyak faktor historis dan saya yakin browser akan mendukungnya untuk waktu yang lama.

Salin konten elemen DOM

<p id="content">123456</p>
<button id="copyButton">Salin</button>

Saat menyalin elemen DOM, Anda perlu menggunakan API pilihan dan API Range sebagai tambahan.

developer.mozilla.org/en-US/docs/…

developer.mozilla.org/en-US/docs/…

Contoh kode:

const copyButton = document.getElementById('copyButton');
const konten = document.getElementById('konten');
copyButton.addEventListener('klik', fungsi () {
  pemilihan const = window.getSelection();
  const range = dokumen.createRange();
  //Setel rentang konten yang dipilih.selectNodeContents(content);
  // Hapus seleksi seleksi.removeAllRanges();
  //Tambahkan pilihan konten yang dipilih.addRange(range);
  document.execCommand('salinan');
});

Pilihan harus dihapus terlebih dahulu dan kemudian rentang ditambahkan.

Ada masalah detail di sini. Setelah mengklik tombol salin, konten yang disalin dipilih, yang agak mendadak.

Solusinya adalah dengan memanggil selection.removeAllRanges() setelah penyalinan selesai untuk menghapus pilihan.

Pertimbangkan situasi lain ketika pengguna memilih bagian halaman sebelum menyalinnya. Setelah penyalinan selesai, selain menghapus konten salinan yang dipilih, Anda juga perlu memulihkan konten yang dipilih pengguna sebelum menyalin.

Kode implementasinya adalah sebagai berikut:

const copyButton = document.getElementById('copyButton');
const konten = document.getElementById('konten');
copyButton.addEventListener('klik', fungsi () {
  pemilihan const = window.getSelection();
  const range = dokumen.createRange();
  //Cache konten yang dipilih oleh pengguna const currentRange =
    seleksi.rangeCount === 0 ? null : seleksi.getRangeAt(0);
  //Atur rentang fragmen dokumen.selectNodeContents(content);
  // Hapus seleksi seleksi.removeAllRanges();
  //Atur fragmen dokumen sebagai pilihan konten yang dipilih.addRange(range);
  mencoba {
    // Salin ke clipboard document.execCommand('copy');
  } menangkap (salah) {
    // Meminta penyalinan gagal} akhirnya {
    seleksi.removeAllRanges();
    jika (Rentang saat ini) {
      //Kembalikan pilihan konten yang dipilih pengguna.addRange(currentRange);
    }
  }
});

Pertama-tama simpan konten yang dipilih oleh pengguna, lalu pulihkan setelah penyalinan selesai.

Salin konten elemen masukan

dan gunakan metode select objek elemen masukan untuk memilih konten. Tidak perlu membuat fragmen rentang untuk menyetel konten yang dipilih.

Contoh kode:

const copyButton = document.getElementById('copyButton');
const inputEl = dokumen.getElementById('input');
copyButton.addEventListener('klik', fungsi () {
  pemilihan const = window.getSelection();
  const Rentang saat ini =
    seleksi.rangeCount === 0 ? null : seleksi.getRangeAt(0);
  //Pilih konten masukan inputEl.select();
  //Salin ke papan klip coba {
    document.execCommand('salinan');
  } menangkap (salah) {
    // Meminta penyalinan gagal // . . .
  } Akhirnya {
    seleksi.removeAllRanges();
    jika (Rentang saat ini) {
      //Kembalikan pilihan konten yang dipilih pengguna.addRange(currentRange);
    }
  }
});

Mengklik tombol salin juga tidak akan menghapus konten yang dipilih sebelumnya.

Metode 3: Timpa acara penyalinan

w3c.github.io/clipboard-a…

Kutip sepotong kode pada tautan di atas sebagai contoh:

// Timpa apa yang sedang disalin ke clipboard.
document.addEventListener('salinan', fungsi (e) {
  // e.clipboardData awalnya kosong, tapi kita bisa mengaturnya ke
  // data yang ingin kita salin ke clipboard.
  e.clipboardData.setData('teks/polos', 'Telur orak-arik ala Barat');
  // Hal ini diperlukan untuk mencegah pemilihan dokumen saat ini
  // sedang ditulis ke clipboard.
  e.preventDefault();
});

Salin konten apa pun di halaman dan tempel konten keluarannya adalah "Telur orak-arik Barat".