Cara Membuat Text Area Auto Block

Untuk membuat text area berbagai tampilan telah dibahas pada postingan sebelumnya. Dalam postingan tersebut sudah dijelaskan bagaimana cara membuat text area biasa dan text area yang unik dan keren. Kali ini masih akan dibahas tentang cara membuat text area, tapi text area yang berikut ini akan ditambah sedikit gaya.

Gaya yang dimaksud adalah text area auto block. Maksudnya, kalau kita mengarahkan mouse pointer ke dalam text area, maka textnya akan diblock/highlight secara otomatis tanpa mengkliknya. Untuk membuat text area seperti itu, perlu menambahkan kode onmouseover="this.form.txt.select()" readonly="readonly" sehingga menjadi seperti berikut:

<div align="center">
<form name="textarea">
<textarea cols="55" name="txt" onmouseover="this.form.txt.select()" readonly="readonly" rows="100" style="height: 40px; width: 350px;">Tulisan atau kode HTML Anda di sini</textarea>
</form>
</div>

• div align="center" menunjukkan posisi text area berada di tengah. Kalau ingin berada di kiri, center diganti dengan left, bila mau di kanan, center diubah menjadi right.
• width: 350px; menunjukkan lebar text area sebesar 350 piksel. Bila ingin yang lebih lebar lagi, silakan ganti angka 350 dengan nilai yang lebih tinggi atau sebaliknya.
• height: 40px; menunjukkan tinggi bidang text area sebesar 40 piksel. Jika ingin yang lebih tinggi lagi, ubah angka 40 dengan nilai yang lebih besar.

Contoh:
Saya mau memasukkan text berikut kedalam text area.
<a href="http://yauni.blogspot.com" title="Tips-Tricks Computer & Internet|•̮• ♈ǎυ ♡̨̐ иȋ •̮•" target="new">•̮• ♈ǎυ ♡̨̐ иȋ •̮•</a>

Maka kode-nya:
<div align="center">
<form name="yauni">
<textarea cols="55" name="txt" onmouseover="this.form.txt.select()" readonly="readonly" rows="100" style="height: 40px; width: 350px;"><a href="http://yauni.blogspot.com" title="Tips-Tricks Computer & Internet|•̮• ♈ǎυ ♡̨̐ иȋ •̮•" target="new">•̮• ♈ǎυ ♡̨̐ иȋ •̮•</a></textarea>
</form>
</div>

Sehingga hasilnya menjadi:

<a href="http://yauni.blogspot.com" title="Tips-Tricks Computer & Internet|•̮• ♈ǎυ ♡̨̐ иȋ •̮•" target="new">•̮• ♈ǎυ ♡̨̐ иȋ •̮•</a>

Thanks to: Klikmunadi

---

Note.
Thanks for reading! Suka dengan artikel ini? Kamu bebas menyebarluaskan, mau menggunakan sharing is sexy tool. Atau kamu mau co-pas, gunakan kode yang ada didalam text area sebagai sumber/link back artikel ini. Gunakan Etika!!

<a href="http://yauni.blogspot.com/2011/08/cara-membuat-text-area-auto-block.html">Cara Membuat Text Area Auto Block</a><br>

Posted in: Tips-Tricks Blog