Copy Text To Clipboard Javascript

MUAZHAN

3 min read

·

Jun 22, 2024

33

Share

Cara Menyalin Teks ke Clipboard dengan JavaScript

Menyalin teks ke clipboard adalah fitur yang umum dijumpai pada aplikasi web modern. Fitur ini memungkinkan pengguna untuk dengan mudah menyalin teks penting seperti kode, URL, atau teks lainnya dari halaman web.

Artikel ini akan membahas cara mengimplementasikan fitur menyalin teks ke clipboard dengan JavaScript.

Metode navigator.clipboard.writeText()

Metode navigator.clipboard.writeText() adalah metode yang paling mudah dan efisien untuk menyalin teks ke clipboard. Metode ini tersedia pada browser modern seperti Chrome, Firefox, Safari, dan Edge. Berikut contoh kode untuk menyalin teks ke clipboard:

const copyText = document.getElementById("myText");
const copyButton = document.getElementById("copyButton");

copyButton.addEventListener("click", () => {
  navigator.clipboard.writeText(copyText.value)
    .then(() => {
      // Teks berhasil disalin ke clipboard
      console.log("Teks berhasil disalin ke clipboard!");
    })
    .catch(err => {
      // Terjadi error saat menyalin teks
      console.error("Gagal menyalin teks ke clipboard: ", err);
    });
});

Kode di atas mengambil teks dari elemen dengan ID myText dan menyalinnya ke clipboard saat tombol dengan ID copyButton diklik.

Metode document.execCommand()

Metode document.execCommand() adalah metode yang lebih tua dan dapat digunakan untuk menyalin teks ke clipboard, namun metode ini dianggap kurang efisien dan mungkin tidak bekerja pada semua browser. Berikut contoh kode untuk menyalin teks ke clipboard menggunakan metode document.execCommand():

const copyText = document.getElementById("myText");
const copyButton = document.getElementById("copyButton");

copyButton.addEventListener("click", () => {
  // Membuat elemen sementara untuk menyimpan teks
  const tempInput = document.createElement("textarea");
  tempInput.value = copyText.value;
  document.body.appendChild(tempInput);

  // Memilih teks dan menyalinnya ke clipboard
  tempInput.select();
  document.execCommand("copy");

  // Menghapus elemen sementara
  document.body.removeChild(tempInput);

  // Memberikan konfirmasi
  console.log("Teks berhasil disalin ke clipboard!");
});

Kode di atas membuat elemen textarea sementara, mengisi teks dari elemen myText, memilih teks, menyalinnya ke clipboard, dan kemudian menghapus elemen sementara.

Tips Tambahan

• Konfirmasi: Berikan konfirmasi kepada pengguna bahwa teks telah berhasil disalin ke clipboard.
• Gunakan ikon: Gunakan ikon yang jelas untuk menunjukkan bahwa pengguna dapat menyalin teks ke clipboard.
• Tambahkan event listener: Tambahkan event listener pada elemen yang berisi teks yang ingin disalin, agar pengguna dapat menyalin teks dengan cara yang lebih mudah.

Kesimpulan

Menyalin teks ke clipboard dengan JavaScript sangat mudah dengan menggunakan metode navigator.clipboard.writeText(). Metode ini lebih efisien dan mudah digunakan dibandingkan metode document.execCommand().