Jika kita mau update status di facebook dan update statusnya panjang kan textboxnya memanjang sendiri tuh, nah, kali ini kita akan membuat efek yang sama menggunakan sebuah plugin jquery

Membuat autogrow textarea

Jika kita mau update status di facebook dan update statusnya panjang kan textboxnya memanjang sendiri tuh, nah, kali ini kita akan membuat efek yang sama menggunakan sebuah plugin jquery

Plugin jQuery yang akan kita gunakan adalah jQuery Autosize, plugin ini dibuat oleh Jack Moore. Untuk menggunakannya, cukup buka www.jacklmoore.com/autosize/ kemudian klik tombol download

Cara menggunakannya pun sangat mudah, berdasarkan website aslinya, anda hanya perlu menuliskan kode ini

$(document).ready(function(){
    $('textarea').autosize();   
});


Dan, voila, selesai deh :D

Jika anda ingin memberikan animasi CSS saat textareanya "bertumbuh", anda hanya perlu memasukkan kode CSS ini:

textarea {
  -webkit-transition: height 0.2s;
  -moz-transition: height 0.2s;
  transition: height 0.2s;
}

Setelah menambahkan CSS, coba ubah sedikit javascriptnya menjadi seperti ini agar animasinya bisa kelihatan

$('.textarea').autosize({append: "\n"});

Kode javascript diatas berfungsi untuk menambahkan baris baru saat textareanya bertumbu, sehingga ada baris kosong dibawah baris yang berisi teks yang dimasukkan

Sebenarnya plugin ini masih mempunyai beberapa "fitur", tapi yang di tutorial ini sudah lengkap untuk basicnya dan bisa langsung diterapkan di website anda

Sekian dari ane, smeoga bermanfaat


About Author

Richard


Comment & Discussions

    Please LOGIN before if you want to give the comment.