Langsung saja, saat ini aku ingin men-share sebuah article lagi, yaitu: How to Make Text Area.
Cara memasang teks area text area sederhana / default ini adalah pada saat menulis postingan pilih menu HTML (bukan edit HTML template yaa). Lihat gambar.
Masukkan kode text area setelah klik HTML
1. Teks area sederhana
<div align="center">
<textarea cols="35" name="code" rows="6">Ganti tulisan ini dengan dengan Teks atau Kode HTML yang ingin anda tampilkan didalam text area</textarea></div>
dengan kode di atas maka tampilan teks area seperti di bawah ini. angka 6 berarti jumlah baris, 35 menunjukkan lebar form teks area
Hasilnya:
keterangan tentang kode diatas :
rows="6" adalah menunjukkan berapa tinggi text area, apabila anda ingin meninggikan lagi tinggal diganti angka yang lebih besar, sebaliknya juga sama apabila ingin lebih kecil tinggal diganti dengan angka yang lebih kecil.
cols="35" adalah menunjukkan berapa lebar text area, apabila anda ingin meninggikan lagi tinggal diganti angka yang lebih besar, sebaliknya juga sama apabila ingin lebih kecil tinggal diganti dengan angka yang lebih kecil.
2. Text Area Dengan menggunakan kata highlight
Cara kedua yaitu dengan menggunakan kata highlight atau yang lainnya agar memudahkan untuk mengcopy isi dari text area. Sedikit menambahkan kode html, text area akan menjadi lebih menarik, yaitu dengan menambahkan tombol untuk di klik. Saat tombol text area di klik semua tulisan yang ada di dalam text area akan langsung terpilih dan tinggal di Copy dengan klik kanan kode yang sudah terpilih lalu pilih salin / copy atau langsung menekan tombol CTRL + huruf C di keyboard. Dengan teks area seperti ini, maka tidak akan ada kode yang tertinggal untuk di copy. Text Area jenis ini di kenal dengan nama Text Area dengan Tombol Highlight. Kode yang digunakan untuk membuat teks area otomatis ini adalah :
Cara kedua yaitu dengan menggunakan kata highlight atau yang lainnya agar memudahkan untuk mengcopy isi dari text area. Sedikit menambahkan kode html, text area akan menjadi lebih menarik, yaitu dengan menambahkan tombol untuk di klik. Saat tombol text area di klik semua tulisan yang ada di dalam text area akan langsung terpilih dan tinggal di Copy dengan klik kanan kode yang sudah terpilih lalu pilih salin / copy atau langsung menekan tombol CTRL + huruf C di keyboard. Dengan teks area seperti ini, maka tidak akan ada kode yang tertinggal untuk di copy. Text Area jenis ini di kenal dengan nama Text Area dengan Tombol Highlight. Kode yang digunakan untuk membuat teks area otomatis ini adalah :
<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">
<textarea cols="30" name="txt" rows="5" wrap="VIRTUAL">Ganti tulisan ini dengan tulisan atau Kode HTML yang akan anda tampilkan di dalam text area</textarea></div>
</form>
</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">
<textarea cols="30" name="txt" rows="5" wrap="VIRTUAL">Ganti tulisan ini dengan tulisan atau Kode HTML yang akan anda tampilkan di dalam text area</textarea></div>
</form>
</div>
Hasilnya:
Silahkan klik pada tulisan HIGHLIGHT ALL, maka semua text yang ada di dalam Text Area akan langsung terHIGHLIGHT / terPILIH.
Sama seperti Text Area yang pertama, anda bisa mengedit kembali kode di atas sesuai keinginan anda, yang penting jangan hancurkan Text Areanya
Kode Canter pertama = Posisi tulisan Highghlight All
Kode center kedua = Posisi teks area
Highlight All = Tulisan di dalam tombol, bisa di ganti sesuai keinginan misalnya "Pilih Semua".
Kode yang berwarna merah = Cara mengeditnya sudah di jelaskan sebelumnya.
3. Cara Yang Ketiga Yaitu text area auto block. Semua tulisan atau kode yang ada di dalam teks area jenis ini akan terpilih secara otomatis saat kotak text area di klik. Jenis teks area ini hampir sama dengan Jenis teks area sebelumnya. Bedanya, teks area ini tidak menggunakan tombol Highlight All. Bagian yang di klik untuk menyeleksi tulisan adalah bagian di dalam teks area. Kode yang digunakan adalah:
<div style="text-align: center;">
<textarea cols="25" onclick="this.focus(); this.select();" rows="3">Contoh Text Area otomatis seleksi saat di klik</textarea></div>
<textarea cols="25" onclick="this.focus(); this.select();" rows="3">Contoh Text Area otomatis seleksi saat di klik</textarea></div>
Hasilnya:
4. Cara yang keempat yaitu teks area auto block atau auto seleksi saat text area di klik. Text area berikut ini akan membuat pengunjung lebih mudah mengcopy tulisan atau kode HTML yang di pasang di dalam teks area karena tulisan di dalam text area akan otomatis terseleksi atau terblock tanpa di klik melainkan hanya mengarahkan mouse di atas teks area. Kode yang di gunakan untuk membuat teks area otomatis seleksi tanpa di klik ini hampir sama dengan text area auto block. Bedanya hanya beberapa huruf yaitu kode yang saya tandai dengan warna merah pada kode di bawah. Berikut kodenya :
<div style="text-align: center;">
<textarea cols="25" onmouseover="this.focus(); this.select();" rows="3">Contoh Text Area otomatis seleksi saat di klik</textarea></div>
<div style="text-align: center;">
<textarea cols="25" onmouseover="this.focus(); this.select();" rows="3">Contoh Text Area otomatis seleksi saat di klik</textarea></div>
Arahkan mouse anda ke dalam text area untuk melihat hasilnya.
Tidak ada komentar:
Posting Komentar