Textarea merupakan tag HTML yang berguna untuk menginput konten atau kode text yang memiliki lebih dari satu baris. Tag ini sangat penting pada pembuatan form HTML, biasa dipakai untuk memasukkan artikel dengan paragraf yang panjang. Berbeda dengan tag input type text, lebar dan tinggi pada textarea dapat dimodifikasi secara manual. Bentuk tag textarea pada HTML seperti ini.
Tanpa Atribut: <textarea></textarea> |
|
Dengan Atribut: <textarea name="syams" placeholder="syamsalabim"> </textarea> |
| Atribut | Value | Deskripsi |
|---|---|---|
| autofocus | autofocus | Memfokuskan textarea otomatis saat halaman dimuat |
| cols | number | Mengatur lebar pada textarea |
| dirname | textareaname.dir | Menentukan arah teks dari textarea akan dikirimkan |
| disabled | disabled | Membekukan atau menonaktifkan textarea |
| form | form_id | Memastikan form yang menjadi milik textarea |
| maxlength | number | Mengatur jumlah maksimal karakter dalam textarea |
| name | text | Menentukan nama textarea ketika dikirim melalui form |
| placeholder | text | Menampilkan deskripsi dalam textarea berupa tanda air |
| readonly | readonly | Mengkhususkan textarea hanya untuk dibaca |
| required | required | Memastikan textarea tidak boleh kosong ketika dikirim |
| rows | number | Mengatur tinggi atau baris pada textarea |
| wrap | hard, soft | Menentukan bagaimana teks ditampilkan saat dikirim |
Selain dari fungsi atribut dan value yang tercantum di atas, ada beragam trik rahasia CSS dan Javascript yang bisa diaplikasikan pada tag textarea. Berikut berbagai trik HTML tersebut yang sering digunakan oleh SyamSalabim ketika mengelola textarea pada halaman website atau blog pribadi.
TIPS TRIK
Otomatis Menambah Tinggi
Pada umumnya tampilan default textarea bersifat stagnan. Ukuran lebar dan tinggi akan tetap sama meski teks yang dimasukkan melebihi panjang atau baris konten pada textarea, dimana kemudian akan menampilkan scrollbar jika area teksnya sudah penuh. Kode di bawah ini berguna untuk membuat textarea otomatis meninggi setiap kali ada baris baru.
| Auto Height Textarea |
|---|
<textarea oninput='this.style.height = "";this.style.height = this.scrollHeight + 3 + "px"'> </textarea> |
Teks Overflow Secara Horizontal
Kalimat pada textarea akan otomatis ke bawah setiap kali teks yang dimuat melebihi panjang dari textarea itu sendiri. Untuk keperluan tertentu, Agan mungkin menginginkan kalimat yang di masukkan ke dalam textarea untuk terus memanjang dan menampilkan scrollbar mendatar, bukannya ke bawah. Untuk itu kode CSS sederhana berikut jadi solusinya.
| Horizontal Overflow Textarea |
|---|
<textarea style="white-space:pre"> </textarea> |
Mengganti Desain Scrollbar
Pada tampilan scrollbar, textarea mengikuti pengaturan umum yang disediakan setiap browser. Tapi tahukah Agan kalau desain scrollbar pada textarea, seperti warna dan ukuran lebarnya, bisa dengan mudah diganti? Bermodal kode CSS sederhana, scrollbar pada textarea dapat dimodifikasi untuk menampilkan suasana berbeda ketika menginput teks.
| Scrollbar Design Textarea |
|---|
<style>
.scroll::-webkit-scrollbar {width: 5px;height: 5px}
.scroll::-webkit-scrollbar-track {background: #222222}
.scroll::-webkit-scrollbar-thumb {background: #FF3333}
.scroll::-webkit-scrollbar-thumb:hover {background: #FF1A1A}
</style>
<textarea class="scroll">
</textarea>
|
Menyalin Konten dengan Klik
Selain untuk memasukkan data berupa teks, textarea juga sering digunakan untuk menampilkan data agar nantinya bisa diedit atau disalin. Umumnya copy paste dalam textarea dilakukan dengan menekan "Ctrl A --> Ctrl C --> Ctrl V", tapi dengan menggunakan Javascript, salin menyalin dapat dilakukan lebih mudah dan cepat. Contohnya di bawah ini dimana teks bisa dicopy hanya dengan sekali klik.
| Copy Text Textarea |
|---|
<textarea id="textCopy">
</textarea>
<script>
document.getElementById("textCopy").onclick = function() {
this.select();
document.execCommand('copy');
}
</script>
|
Menyalin Konten dengan Tombol
Selain memakai Javascript untuk menyalin konten dalam textarea secara langsung hanya dengan mengklik pada areanya, Agan juga bisa melakukan copy paste dengan memakai tombol menggunakan tag button. Gunanya untuk memberi estetika agar textarea lebih menarik dan interaktif. Bagi yang tertarik maka kode Javascript berikut layak untuk dicoba.
| Copy Text Textarea (+ Button) |
|---|
<textarea id="txtCopy"></textarea>
<button onclick="btnCopy()">COPY</button>
<script>
function btnCopy() {
let textarea = document.getElementById("txtCopy");
textarea.select();
document.execCommand('copy');
}
</script>
|
Menghapus Baris Enter Terakhir
Acapkali ketika memasang tag textarea disertai konten wajib yang memuat banyak teks didalamnya, pada halaman HTML akan terlihat garis kosong pada baris terakhir textarea. Meski cukup sepele, tapi ini bisa menjadi masalah ketika memasukkan data ke dalam database. Selain itu juga mengganggu mata bagi yang mengutamakan detail penampilan. Skrip JS simpel ini bisa membantu.
| Remove Last Line |
|---|
<textarea id="textTrim">
</textarea>
<script>
document.getElementById("textTrim").innerHTML = document.getElementById("textTrim").innerHTML.trim();
</script>
|
Demikian beragam trik terlengkap Textarea untuk mempermudah pengelolaan web HTML. Sebagai salah satu tag paling utama dalam pembuatan form, textarea punya keunggulan tersendiri bagi programmer, baik itu front-end atau back-end developer. Semoga keberadaan artikel ini dapat membantu Agan dalam mengelola penggunaan textarea agar pekerjaan lebih efisien dan efektif.
0 Comments