Cara Menyalin Teks ke Clipboard di JavaScript

Tombol “Salin” pada kode, tautan, atau kupon sangat memudahkan pengguna. Artikel ini membahas cara menyalin teks ke clipboard di JavaScript.

Clipboard API

<script>
function salin(teks) {
    navigator.clipboard.writeText(teks).then(function() {
        alert("Berhasil disalin!");
    });
}
salin("https://sharecode.my.id");
</script>

Contoh Kasus: Tombol Salin Kode Kupon

<script>
document.getElementById("salinKupon").addEventListener("click", function() {
    const kode = document.getElementById("kupon").textContent;
    navigator.clipboard.writeText(kode).then(() => {
        this.textContent = "Tersalin!";
        setTimeout(() => this.textContent = "Salin", 2000);
    });
});
</script>

Mengubah teks tombol sementara memberi umpan balik visual yang jelas.

Catatan Penting

Clipboard API hanya bekerja pada koneksi aman (HTTPS) dan biasanya harus dipicu oleh aksi pengguna seperti klik tombol, bukan otomatis.

Kesimpulan

Gunakan navigator.clipboard.writeText() untuk menyalin teks. Berikan umpan balik seperti mengubah teks tombol menjadi “Tersalin!”. Pastikan situs berjalan di HTTPS agar fitur ini aktif.

Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi JavaScript (MDN).

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *