Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Menyalin Teks ke Papan Klip Pelanggan dengan jQuery?

Bagaimana untuk Menyalin Teks ke Papan Klip Pelanggan dengan jQuery?

Susan Sarandon
Lepaskan: 2024-10-19 12:02:02
asal
740 orang telah melayarinya

How to Copy Text to Client's Clipboard with jQuery?

Salin Teks ke Papan Klip Pelanggan dengan jQuery

Menyalin teks ke papan keratan pelanggan melibatkan beberapa langkah:

  1. Cetuskan penyalinan apabila satu klik dalam kawasan teks.
  2. Pindahkan teks yang dipilih ke papan keratan.
  3. Berikan maklum balas pengguna tentang tindakan tersebut.

Untuk mencapai ini menggunakan jQuery, ikut langkah berikut:

  1. Sertakan jQuery dalam dokumen HTML anda jika ia belum ada.
<code class="html"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script></code>
Salin selepas log masuk
  1. Buat elemen textarea dan lampirkan pendengar acara pada acara kliknya:
<code class="html"><textarea id="my-textarea"></textarea>

<script>
$( "#my-textarea" ).on( "click", function() {
  // Get the selected text
  var selectedText = $(this).val();

  // Clipboard API is not supported in all browsers
  if (!navigator.clipboard) {
    console.error("Clipboard API not supported");
    return;
  }

  // Set the selected text to the clipboard
  navigator.clipboard.writeText(selectedText).then(() => {
    // Success
    alert("Text copied to clipboard!");
  }, () => {
    // Error
    alert("Failed to copy text to clipboard");
  });
});
</script></code>
Salin selepas log masuk

Pendekatan ini menggunakan API Papan Klip, yang disokong oleh kebanyakan penyemak imbas moden. Jika khalayak sasaran anda termasuk pelayar lama, pertimbangkan untuk menggunakan kaedah sandaran, seperti menggunakan ZeroClipboard atau Flash, seperti yang diterangkan dalam jawapan yang disediakan.

Atas ialah kandungan terperinci Bagaimana untuk Menyalin Teks ke Papan Klip Pelanggan dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan