Textarea merupakan salah satu elemen penting dalam HTML yang digunakan untuk menerima input teks dalam jumlah panjang. Secara default, textarea hanya menampilkan teks apa adanya tanpa memproses format seperti baris baru menjadi elemen HTML.
Namun, dalam beberapa kasus, kita ingin agar setiap baris baru yang diketik pengguna bisa otomatis diubah menjadi elemen HTML seperti <br> atau <p>. Hal ini biasanya digunakan dalam fitur preview atau editor sederhana.
Berikut adalah cara membuat textarea yang secara otomatis mengubah baris baru menggunakan JavaScript.
Langkah pertama adalah membuat elemen textarea di dalam HTML.
<textarea id="textarea"></textarea>
Selanjutnya, gunakan JavaScript untuk mendeteksi input dari pengguna dan mengubah baris baru menjadi tag HTML.
<script>
document.getElementById("textarea").addEventListener("keyup", function(event) {
this.innerHTML = this.value.replace(/\n/g, "<br>");
});
</script>
Kode di atas bekerja dengan cara mendeteksi setiap tombol yang dilepas (event keyup). Kemudian, isi dari textarea akan diproses menggunakan fungsi replace() untuk mengubah karakter baris baru (\n) menjadi tag <br>.
Perlu diperhatikan bahwa textarea sebenarnya tidak merender HTML. Jadi, penggunaan innerHTML di sini hanya sebagai contoh manipulasi teks. Jika ingin menampilkan hasilnya secara nyata, sebaiknya gunakan elemen lain seperti <div> sebagai preview.
Sebagai alternatif, Anda juga bisa mengganti <br> dengan <p> jika ingin membuat setiap baris menjadi paragraf baru.
Teknik ini sangat berguna dalam pembuatan fitur seperti live preview, editor artikel sederhana, atau form input yang membutuhkan format teks tertentu.
Dengan memahami konsep ini, Anda bisa mengembangkan fitur yang lebih kompleks seperti editor teks berbasis web atau bahkan CMS sederhana.