Macam Sistem Textarea Dengan Tambahan Javascript

Situseo Blog : Macam Sistem Textarea Dengan Tambahan Javascript, textarea merupakan tag html yang jika digunakan akan menghasilkan suatu ruang untuk menyimpan teks atau script dengan membentuk area baru. seperti kebiasaan orang, textarea biasanya digunakan untuk menyimpan script atau teks agar menjadi pembeda dalam penyajian penulisan, untuk membuat textarea kita hanya perlu menuliskan tag <textarea> seperti ini :

<textarea>isi teks area</textarea>

untuk menentukan berapa baris dan lebar textarea kita bisa tambahkan attribute rows dan cols, rows menerangkan berapa baris teks yang akan ditampilkan, sedangkan cols menerangkan berapa lebar ukuran textarea yang akan dibuat, sebagai contoh scriptnya menjadi seperti ini :

<textarea rows="3" cols="40">isi textarea</textarea>

Sehingga hasilnya seperti ini:

textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea

Atau kita bisa mengganti ukuran ruang textarea dengan menggunakan style css, sehingga scriptnya menjadi seperti ini :

<textarea style="height:50px; width:300px">isi textarea</textarea>

dan hasilnya seperti ini:

textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea

Untuk memudahkan pengunjung untuk menyeleksi (highlight isi textarea) kita bisa tambahkan attribute lain dan tambahan tag, yaitu tag <form> dan sedikit javascript untuk menghasilkan sitem seleksi yang diinginkan, dibawah ini ada beberapa contoh sistem seleksi yang bisa dijadikan alternatif pilihan :

One Click Seleksi Textarea

<form name="Dalang Error"> <textarea rows="3" cols="40" name="txt" onclick="this.form.txt.select()">isi textarea</textarea> </form>

Double Click Seleksi Textarea

<form name="Dalang Error"> <textarea rows="3" cols="40" name="txt" ondblclick="this.form.txt.select()">isi textarea</textarea> </form>

Arahkan Mouse Pada Textarea

<form name="Dalang Error"> <textarea rows="3" cols="40" name="txt" onmousemove="this.form.txt.select()">isi textarea</textarea> </form>

Pindahkan Mouse Dari Textarea

<form name="Dalang Error"> <textarea rows="3" cols="40" name="txt" onmouseout="this.form.txt.select()">isi textarea</textarea> </form>

Untuk yang satu lagi menggunakan tambahan tombol untuk menyeleksi semua isi textarea dan untuk ukurannya saya mengganti dengan style css, sehingga kodenya menjadi seperti ini :

Textarea Dengan Tombol

<form name="Dalang Error"> <div align="center"> <input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /> </div> <div align="center"> <textarea name="txt" style="height: 50px; width: 300px;">isi text area</textarea></div> </form>

apabila isi dari teks area panjang sedangkan kotak teks areanya kecil, nantinya teks area akan membentuk tombol scroll secara otomatis.

Jika ingin memodifikasi tampilan text area dengan tambahan css, kalian bisa mengetahui caranya pada link ini

Semoga bermanfaat,