Clipboard API: Menyalin Teks dengan JavaScript

Kenapa Ada Clipboard API?

Tombol "salin" ada di hampir setiap aplikasi modern: kode promo e-commerce, nomor rekening warung, link undangan grup. Dulu, JavaScript menyalin teks dengan trik document.execCommand("copy"): membuat textarea tak terlihat, menyeleksinya, lalu memerintah browser menyalin. Trik ini rapuh, tidak konsisten antar browser, dan sekarang resmi ditinggalkan.

Penggantinya adalah Clipboard API lewat navigator.clipboard: cara resmi dan modern untuk membaca serta menulis clipboard, semuanya berbasis Promise. API inilah yang dipakai hampir setiap tombol salin di web modern, dan memahaminya membuatmu bisa membangun interaksi kecil yang terasa profesional.

Menyalin Teks dengan writeText

Metode utama untuk menyalin adalah navigator.clipboard.writeText(). Ia menerima sebuah string dan mengembalikan Promise yang selesai ketika teks berhasil masuk ke clipboard:

const tombol = document.getElementById("salin");

tombol.addEventListener("click", async () => {
  try {
    await navigator.clipboard.writeText("PROMO-WARUNG-20");
    document.getElementById("status").textContent = "Kode promo tersalin!";
  } catch (err) {
    document.getElementById("status").textContent = "Gagal menyalin, coba lagi.";
  }
});

Perhatikan await di sana. writeText berjalan asinkron karena browser perlu berkoordinasi dengan sistem operasi di balik layar. Tanpa await atau .then(), kamu tidak tahu kapan penyalinan selesai atau apakah ia gagal, sehingga pengguna tidak mendapat kepastian apa pun.

Membaca Clipboard dengan readText

Kebalikannya adalah navigator.clipboard.readText(), yang membaca teks yang sedang tersimpan di clipboard. Contoh realistis: tombol "Tempel" pada form catatan kasir di warung, supaya kasir tidak perlu mengetik ulang catatan panjang dari pelanggan:

const tempel = document.getElementById("tempel");
const catatan = document.getElementById("catatan");

tempel.addEventListener("click", async () => {
  try {
    catatan.value = await navigator.clipboard.readText();
  } catch (err) {
    alert("Tidak bisa membaca clipboard. Beri izin dulu ya.");
  }
});

Membaca clipboard jauh lebih sensitif daripada menulis, karena isinya bisa berupa password atau data pribadi. Karena itu browser selalu meminta izin eksplisit dari pengguna sebelum mengizinkannya, dan kamu wajib menangani kasus saat izin ditolak.

Syarat Keamanan yang Wajib Diketahui

Clipboard API hanya tersedia dalam secure context: halaman HTTPS atau localhost. Kalau kamu membuka file HTML langsung dari folder (file://), navigator.clipboard akan bernilai undefined dan kodenya gagal tanpa pesan error yang jelas.

Selain itu, browser mewajibkan user gesture: pemanggilan writeText harus terjadi di dalam event handler seperti click. Kamu tidak bisa menyalin teks otomatis saat halaman dimuat; browser akan menolaknya demi melindungi pengguna dari situs yang diam-diam mengotak-atik clipboard mereka.

Catatan teknis: selalu cek if (navigator.clipboard) sebelum memakai API ini. Untuk browser lama, sediakan fallback: seleksi teks di dalam sebuah <input> agar pengguna bisa menyalin manual dengan Ctrl+C.

Jebakan Umum

1. Promise tidak ditangani: writeText yang gagal tanpa .catch() atau try...catch memunculkan UnhandledPromiseRejection di console, dan pengguna tidak mendapat feedback apa pun.
2. Mengetes lewat file://: kode terlihat benar, tapi navigator.clipboard undefined. Jalankan lewat server lokal atau deploy ke HTTPS.
3. Menyalin di luar user gesture: memanggil writeText di dalam setTimeout tanpa interaksi pengguna membuat browser menolaknya.
4. Menganggap readText selalu diizinkan: membaca clipboard butuh izin eksplisit di banyak browser. Siapkan pesan error yang ramah kalau pengguna menolak.