Pada artikel kali ini saya akan membuat fungsi untuk menyalin text menggunakan bahasa pemrograman javascript. Dengan menggunakan fungsi ini kita bisa menyalin text hanya dengan mengklik icon / img copy dengan satu kali klik. Bagaimana Cara Membuat Copy to Clipboard ? . Berikut panduannya:
Sebelum mengikuti tutorial ini pastikan kalian sudah membaca artikel sebelumnya tentang cara membuat password generator secara otomatis karena kita akan menggunakan kode dari projek tersebut.
Silahkan salin kode html dan css pada artikel tersebut kemudian pastekan pada folder proyek baru kita. paste kode html pada file index.html dan kode css pada file style.css.
Jika sudah silahkan buka file index.html kemudian tambahkan code seperti berikut:
<img src="https://img.icons8.com/material-rounded/24/000000/copy.png" alt="copy">Letakan di bawah kode <input
Selanjutnya untuk memindahkan dan mengatur ukuran dari img yang sudah kita tambahkan dalam kode html. Kita membutuhkan property css untuk melakukan itu. silahkan tambahkan kode css berikut pada file style.css:
.input-box img {
position: absolute;
width: 40px;
top: 56px;
right: 14px;
opacity: 0.2;
cursor: pointer;
transform: rotate(90deg);
}
.input-box img:hover {
opacity: 1;
color: gray;
}Supaya kode ini berjalan kita membutuhkan sebuah fungsi, kita akan menggunkan javascript untuk membuat fungsinya silahkan tambahkan kode berikut tepat di atas kode </script>:
function copyPassword(){
var copyPassText = document.getElementById("password");
copyPassText.select();
copyPassText.setSelectionRange(0, 9999)
document.execCommand("copy");
}Ketika fungsi ini di panggil kita bisa mengcopy text dari input. Untuk memanggilnya silahkan tambahakan atribut onclick="copyPassword();" berikut pada tag img:
<img src="https://img.icons8.com/material-rounded/24/000000/copy.png" alt="copy" onclick="copyPassword();">Nah itulah cara membuat copy to clipboard menggunakan javascript. Kode yang kita buat akan berjalan ketika kita sudah mengenerate password dengan mengklik button generate kemudian mengklik icon salin atau copy dan jika sudah di klik maka text yang ada di input otomatis tersalin.