Cara Membuat Copy to Clipboard Button Menggunakan JavaScript

Pada website modern, fitur Copy to Clipboard sangat sering digunakan, terutama pada situs tools, generator kode, dan tutorial pemrograman. Dengan fitur ini, pengguna dapat menyalin teks hanya dengan satu klik tanpa perlu memblok teks secara manual.

Fungsi Copy to Clipboard

Fitur Copy Clipboard berfungsi untuk menyalin teks secara otomatis ke clipboard perangkat pengguna menggunakan JavaScript. Biasanya digunakan untuk:

• Menyalin kode HTML, CSS, atau JavaScript
• Menyalin link referral
• Menyalin token atau API key
• Menyalin hasil generator tools

Kode HTML Tombol

Buat terlebih dahulu struktur HTML berupa textarea dan tombol copy.

<textarea id="textToCopy">Contoh teks yang akan disalin</textarea>
<button onclick="copyText()">Copy Text</button>

Script JavaScript Copy Clipboard

Tambahkan JavaScript berikut sebelum tag </body> atau di bagian script template.

<script>
function copyText() {
  var copyText = document.getElementById("textToCopy");
  copyText.select();
  copyText.setSelectionRange(0, 99999);

  navigator.clipboard.writeText(copyText.value);

  alert("Teks berhasil disalin!");
}
</script>

CSS Styling Tombol (Opsional)

Agar tampilan tombol lebih menarik, tambahkan CSS berikut.

button{
  padding:10px 18px;
  border:none;
  background:#4CAF50;
  color:white;
  border-radius:6px;
  cursor:pointer;
}

button:hover{
  background:#45a049;
}

Hasil Akhir

Setelah semua kode ditambahkan, tombol copy akan otomatis menyalin teks dari textarea ke clipboard pengguna ketika diklik. Fitur ini sangat berguna untuk website tools seperti generator kode, minify tools, dan developer utilities.

Anda juga dapat mengembangkan fitur ini dengan menambahkan notifikasi toast, icon copy, atau animasi agar tampilan website menjadi lebih modern dan interaktif.