DraCoola Multimedia - Web Hosting Murah Server Indonesia, Domain Registration, Web Design, Digital Printing
Powered by MaxBlogPress 
Copy to clipboard using JavaScript

Copy to clipboard using JavaScript

Setelah berpusing ria, dan akhirnya ngga’ menghubungi adeknya :p, akhirnya saya googling dan nemu beberapa contoh penggunaan JavaScript Auto Copy to Clipboard, akhirnya saya menemukan satu fungsi yang menurut saya keren :D Pada instalasi dasar, beberapa browser selain Internet Explorer tidak mendukung Auto Copy menggunakan JavaScript. Jadi script auto copy ini hanya berfungsi untuk Internet Explorer saja :D

Nah, lalu apa yang menarik di sini ? Fungsi yang saya dapat dari hasil kemarin adalah, saat cursor melakukan click, maka semua yang ada pada textarea akan terpilih (Tested on Firefox, IE, dan Opera). Lalu untuk apa fungsinya ? Ya fungsinya adalah untuk select all aja :p Tergantung variasi kalian ingin digunakan untuk apa.

Berikut fungsi javascript nya :

<script type="text/javascript">
function doclip(d){
		var content = eval("document.kopi." + d) // menuju ke form
		content.focus()
		content.select()
		range = content.createTextRange()
		range.execCommand("Copy")
		window.status="Contents copied to clipboard" // Menampilkan status untuk IE
		setTimeout("window.status=''",1800)
	}
</script>

Setelah membuat fungsi di atas menggunakan javascript, sekarang buatlah rangkaian form seperti berikut :

<form name="kopi">
<textarea name="txta_pilihan" cols="25" rows="5" onclick="doclip('txta_pilihan')">
<!-- your text here -->
</textarea>

Kenapa <form> tidak diberi closing tag ? Karena kesimpulan saya itu hanya untuk identifikasi saja bahwa fungsi tersebut baru bisa di jalankan apabila form pemanggilnya di keluarkan. CMIIW. Kalau dikasih closing tag juga ngga’ masalah kok. Jangan lupa pada form tersebut diberi atribut name dengan value kopi

Nah, pada bagian berikutnya saya menggunakan textarea (bisa juga yang lain seperti input). Pada textarea tersebut saya menambahkan attribut name dengan value txta_pilihan. Lalu pada bagian OnClick (karena fungsi ini di konfigurasi jalan setelah di klik), saya menambahkan fungsi yang telah terbuat di atas yaitu onclick=”doclip(‘txta_pilihan’)”. Di mana doclip adalah fungsi yang telah di buat dan txta_pilihan adalah nama textarea yang ingin di pilih.

Bagaimana hasilnya ? Silakan di coba :) Laporkan jika terjadi error :D

tabs-top
bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark
tabs-top

4 Comments »

  1. avatar
    15:15:45 - December 12th, 2008: #1
    byme says:

    bisa dicopy g mas nih tutorial
    hehehhe
    http://webyme.co.cc

    comment-bottom
  2. avatar
    18:54:08 - December 12th, 2008: #2
    patembe says:

    Saya coba dulu deh! :D
    soalnya gak ngerti cuman kalo baca doank, harus dipraktekin dulu neh!
    ;)

    comment-bottom
  3. avatar
    23:59:44 - February 26th, 2009: #3
    OKKY says:

    bsa buat FS g??low ya, copy n paste nya dmna??

    comment-bottom
  4. avatar
    18:40:44 - October 1st, 2009: #4
    deelpe says:

    salam kenal
    artikel nya menarik,
    sya lagi blajar bikin2 blog nih mas
    kalo yang untuk Firefox gimana mas?
    Thx sebelumnya :)

    comment-bottom

RSS feed for comments on this post. TrackBack URL

Leave a comment