news

2023-10-04

Javascript Copy To Clipboard | No Plugin | With Source Code

Javascript Copy To Clipboard | No Plugin | With Source Code

Di era digital saat ini, sering kali kita perlu menyalin (copy) teks atau elemen lainnya dari halaman web. Meskipun ada banyak plugin yang tersedia untuk mempermudah tugas ini, namun sebenarnya kita dapat melakukan tugas ini dengan menggunakan JavaScript tanpa perlu menginstal plugin tambahan. Dalam artikel ini, kami akan membahas tentang bagaimana kita dapat menggunakan kode JavaScript sederhana untuk menyalin teks ke clipboard tanpa plugin tambahan.

Sebelum kita mulai, ada beberapa hal yang perlu dipahami. Penggunaan JavaScript untuk menyalin teks ke clipboard hanya didukung oleh browser modern seperti Chrome, Firefox, dan Safari. Internet Explorer tidak mendukung fitur ini. Selain itu, beberapa pengaturan keamanan browser atau perangkat lunak antivirus juga dapat memblokir fungsi ini. Jadi, pastikan Anda menjalankan kode ini di lingkungan yang sesuai.

Langkah pertama dalam menyalin teks ke clipboard adalah dengan menambahkan elemen HTML untuk tombol salin. Berikut adalah kode HTML dasar untuk tombol salin:

```html ```

Kemudian, kita perlu menambahkan kode JavaScript yang akan dijalankan saat tombol salin diklik. Berikut adalah kode JavaScript untuk menyalin teks ke clipboard:

```javascript function copyToClipboard() { var copyText = "Teks yang akan disalin";

var tempInput = document.createElement("input"); tempInput.value = copyText; document.body.appendChild(tempInput);

tempInput.select(); document.execCommand("copy"); document.body.removeChild(tempInput); }

var copyButton = document.getElementById("copyButton"); copyButton.addEventListener("click", copyToClipboard); ```

Mari kita jelaskan baris kode JavaScript di atas satu per satu. Pertama, kami mendefinisikan fungsi `copyToClipboard()` yang akan dijalankan saat tombol salin diklik. Dalam fungsi ini, kami menentukan teks yang ingin kami salin ke dalam variabel `copyText`. Anda dapat mengganti teks ini sesuai dengan kebutuhan Anda.

Selanjutnya, kami membuat elemen `` sementara menggunakan `document.createElement("input")`. Kami mengatur nilai input ke teks yang ingin kami salin menggunakan `tempInput.value = copyText`. Selanjutnya, kami menambahkan elemen input sementara ke dalam elemen body menggunakan `document.body.appendChild(tempInput)`.

Setelah itu, kami menjalankan perintah `tempInput.select()` untuk memilih teks dalam elemen input. Hal ini diperlukan agar fungsi `document.execCommand("copy")` dapat bekerja dengan benar dan menyalin teks yang dipilih ke clipboard.

Terakhir, kami menghapus elemen input sementara dari halaman menggunakan `document.body.removeChild(tempInput)`.

Kode JavaScript terakhir memilih tombol salin menggunakan `document.getElementById("copyButton")` dan menambahkan event listener untuk menghubungkannya dengan fungsi `copyToClipboard()` saat tombol diklik.

Sekarang, ketika tombol salin diklik, teks yang ditentukan akan disalin ke clipboard. Anda dapat memasukkan kode ini ke dalam file JavaScript terpisah atau menempatkannya di dalam elemen `