Text Area dengan Highlight

Diposting oleh Erik Krisnawan di 03.10

Posting ini adalah lanjutan dari postingan sebelumnya Membuat Text Area, kali ini saya akan membahas cara membuat Text Area dengan menambahkan tombol Highlight.

Fungsi tombol Highlight ini adalah untuk mempermudah menyalin seluruh text ataupun kode yang yang terdapat pada text area cukup dengan klik pada tombol highlight, maka seluruh text ataupun kode yang ada di dalam text area akan di highlight (ditandai/diblok) dan tinggal di copy saja. 

Fasilitas ini sangat berguna tatkala text ataupun kode yang ditulis sangat panjang maksudnya adalah untuk mengurangi resiko tertinggalnya suatu text ataupun kode ketika di copy.

Cara membuat text area dengan menggunakan tombol highlight ini adalah dengan menggunakan kode HTML sebagai berikut :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 60px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Tulis text ataupun kode yang ingin anda tampilkan di dalam text area</textarea></p></div></form>

Hasilnya:

Tulis text ataupun kode yang ingin anda tampilkan di dalam text area

Keterangan:

<div align="center">

Kata center menunjukan bahwa posisi Tombol Highlight akan berada di tengah, Center bisa juga diganti left atau right (sesuai kebutuhan).

<input onclick="javascript:this.form.txt.focus();this.form.txt.selec()">

Kode ini artinya ketika Tombol Highlight di klik, maka seluruh text yang ada di dalam text area akan di highlight (di tandai atau di blok).

Value="Highlight All"

Kata Highlight All adalah kata yang akan muncul di dalam tombol, bisa juga di rubah dengan kata lain misalnya Bakso, tapi kayaknya gak lucu, heheh.

<p align="center">

Kode ini menunjukan bahwa text area akan berada di tengah.

<textarea style="WIDTH: 300px; HEIGHT: 60px"

"WIDTH:300px" menunjukan lebar dari text area tersebut sebesar 300 pixel. Dan "HEIGHT: 60px" menunjukan bahwa text area akan mempunyai tinggi sebesar 60 pixel.