copy to clipboard menggunakan jquery

Hallo blogger kali ini saya akan menjelaskan tentang bagaimana cara membuat copy to clipboard dari input type text dengan menekan tombol copy menggunakan fungsi document.execCommand("copy"); atau secara manual dapat dilakukan dengan (ctrl + c) dengan menggunakan button. fungsi document.execCommand("copy"); digunakan untuk mengeksekusi perintah copy dengan javascript fitur ini dimaksutkan untuk mempermudah user ketika kita akan mengcopy text tanpa harus select kalimat yang dicopy dan menekan ctrl + c.  baik lansung saja saya akan memberikan contohnya

Baca juga merotasi memutar gambar dengan jquery


yang pertama buat file html seperti berikut berinama terserah anda contoh arifweb.htnl

<html>
<head>
<title>copy to clipboard</title>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<div class='input-group'>
<input type='text'  class='form-control' name='code' readonly='true'  id='generate-notif'>
<span class='input-group-btn'>
<button class='btn btn-info btn-flat' type='button' onclick=copyToClipboard()>Copy</button>
</span>
</div>
</body>
</html>

pada script diatas terdapat input type text dengan id=generate-notif dan tombol copy dengan event onclick.
kemudian selanjutnya sisipkan kode jquery, untuk script jquerynya dapat dilihat dibawah ini

JQUERY

<script type="text/javascript">
function copyToClipboard() {
  $("#generate-notif").select();
  document.execCommand("copy");
alert("berhasil di copy");
}
</script>

letakkan kode jquery diatas di antara <head> </head>

Baca juga cara membuat barcode dengan php dan jquery


untuk mengecek apakah script anda berhasil anda tinggal memasukkan kata di textbox kemudian klik tombol copy lalu paste ctrl + v di word / editor anda.

fungsi diatas dijalankan ketika button copy diklik input type text diselect / diblock kemudian menjalankan document.execCommand("copy");. cukup mudah bukan mungkin cukup sekian tutorial saya tentang copy to clipboard menggunakan jquery. Apabila artikel ini bermanfaat dan ada yang ingin ditanyakan silahkan masukkan ke kolom komentar Terima kasih :)


Share this

Related Posts

Previous
Next Post »

2 komentar

komentar
26 September 2016 15.25 delete Komentar ini telah dihapus oleh administrator blog.
avatar
26 September 2016 15.26 delete Komentar ini telah dihapus oleh administrator blog.
avatar