Seperti yang kita ketahui textarea merupakan salah satu tag html yang sering digunakan untuk input data dalam jumlah karakter yang banyak seperti untuk alamat, keterangan dan sebagainya.
Pada umumnya sebuah textarea tidak akan bertambah otomatis ukurannya apabila data yang dimasukkan terlalu banyak, melainkan akan menampilkan scroll pada sebelah kanan dimana ukuran tidak berubah sama sekali.
Nah, sekarang mari kita bahas bagaimana caranya agar textarea tidak menampilkan scroll saat data yang dimasukkan terlalu banyak, melainkan secara otomatis akan bertambah sendiri.
Dalam hal ini akan ada 5 proses yang dibutuhkan, yakni:
- Membuat fungsi dasar objek elastis
- Mendapatkan css style
- Membuat div tersembunyi
- Copy isi textarea ke dalam div tersembunyi dan mendapatkan ukuran height
- Ukur ulang textarea
Kelima proses di atas dibuatkan di dalam satu file javascript yang nantinya akan dipanggil dalam halaman yang digunakan.
Langkah selanjutnya adalah menambahkan id pada text area dan kemudian memanggil fungsi yang sudah dibuat sesuai dengan id yang telah diberikan pada text area.
<textarea id=”elastis” >textarea otomatis membesar dan mengecil sesuai dengan banyaknya input yang dimasukkan.</textarea>
<script type=”text/javascript”>
elasticTextArea(“elastis”);
</script>
Sekarang lihat hasilnya dan perbedaannya.
Mudah bukan? Anda bisa mengembangkannya lagi sesuai kreatifitas dan kebutuhan anda.
Klik disini untuk melihat demo
Kunjungi www.proweb.co.id untuk menambah wawasan anda.