cara membuat copy to clipboard dengan javascript

cara membuat copy to clipboard dengan javascript

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat copy to clipboard dengan javascript.

copy to clipboard tentu tidak asing lagi buat kalian apa lagi jika kalian seorang blogger, copy to clipboard ini perannya cukup penting dan pasti selalu kita pakai saat membuat website atau blog.

biasanya dapat kita temui juga di situs yang memiliki widget share artikel yang sudah di kombinasikan dengan tombol copy to clipboard untuk memudahkan pengunjung mengcopy url artikel yang ingin di bagikannya tanpa harus menyalin secara manual.

copy to clipboard juga dapat kita kombinasikan di beberapa widget yang akan kita buat, contohnya saja untuk membuat tombol menyalin nomor rekening yang bisa kita terapkan pada situs toko online yang kita miliki dan masih banyak lagi yang bisa kita lakukan.

Javascript Copy To Clipboard

di sini saya buat input yang memiliki value www.wendycode.com dan saya beri id inputQ dan sebuah tombol onclick, di sini kita akan membuat saat tombol copy di klik kita akan menyalin value yang ada di input yaitu www.wendycode.com

<!-- html input sederhana -->
<input type='text' value='www.wendycode.com' id='inputQ'/>
<!-- html button sederhana -->
<button onclick='copy()'>Copy</button>

<script>
// function copy() harus sama dengan nilai onclick pada button di html atas
function copy(){
// di dalam fungsi ini kita seleksi dengan id yang ada di input
document.querySelector('#inputQ').select(),document.execCommand('copy');
}
</script>

tutorial ini hanyalah dasarnya saja sisanya kembali pada diri kalian sendiri bagaimana kalian mengkreasikannya sesuai kebutuhan, ok jadi sekian cara membuat copy to clipboard dengan javascript semoga bermanfaat