Menampilkan Scroll Box Dengan Button Select All

Di beberapa tulisan rekan blogger, anda mungkin pernah mendapati sebuah kolom scroll dengan tulisan select all di atasnya. Ketika anda klik atasnya, maka seluruh isi di dalam kolom akan terkopi. Contoh gambar seperti di bawah ini.

CONTOH SCROLL BOX DENGAN TULISAN SELECT ALL di ATAS

Bagaimana cara membuatnya? Mudah saja, kita hanya tinggal copy kode berikut ini :

<div>

<form name="copy">

<div align="center">

<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /></div>

<div align="center">

</div>

<div align="center">

<textarea cols="55" name="txt" rows="100" style="height: 100px; width: 400px;" wrap="VIRTUAL">Silahkan Meletakkan Kode Script dan Teks di SINI</textarea></div>

</form>

</div>

CATATAN

1. Lebar kolom dengan kode WIDTH : 400px" bisa anda edit sesuai kebutuhan
2. Tinggi kolom dengan kode HEIGHT : 100px" juga bisa anda anda otak atik
3. Label button dengan kode tulisan Select All silahkan sampeyan rubah sesuai selera

Jadi, bila kode di atas coba saya masukkan ke dalam SCROLL BOX, maka hasilnya akan nampak seperti di bawah ini.

<div><br /> <form name="copy"><br /> <div align="center"><br /> <input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /></div><br /> <div align="center"><br /> </div><br /> <div align="center"><br /> <textarea cols="55" name="txt" rows="100" style="height: 100px; width: 400px;" wrap="VIRTUAL">Silahkan Meletakkan Kode Script dan Teks di SINI</textarea></div><br /> </form><br /> </div>

Bagaimana, ringkas bukan?

Semoga bisa digunakan sewaktu waktu, untuk memperingkas tampilan dan mempermudah pengunjung saat akan copy paste sebuah kode (untuk button select all, anda masih butuh klik copy dan paste di tempat yang dimaksud). Semoga bermanfaat.