Input text pada html memiliki kemampuan untuk membatasi panjang karakter yang dapat dimasukkan kedalamnya. Attribut maxLength pada tag <input> dapat secara otomatis membatasi panjang karakter maksimum yang dapat dimasukkan kedalam input tersebut. Misalnya pada contoh dibawah:

Silakan ketikkan maksimum 5 karakter:

Namun hal ini tidak berlaku untuk <textarea>, yang mana tidak mendukung attribute maxlength ini. Dan hal inilah alasan utama tulisan ini dibuat. Ada suatu ketika, saya harus membuat form dengan element berupa textarea namun juga harus membatasi panjang input user, berhubung field di database yang menyimpannya nilai juga terbatas.

Jadi bagaimana? Dalam kondisi seperti ini hanya bisa mengandalkan javascript saja. Idenya adalah, setiap kali user mengetikkan sesuatu, yang ditangkap oleh event keypress, kita gunakan javascript untuk memvalidasi input tersebut, dalam hal ini hanya membatasi panjang karakter yang sudah ada, apabila panjangnya sudah mencapai batas maksimum, kita batalkan input tersebut dengan cara menolak event keypress nya.

Dan, ya...konsep tersebut bekerja dengan baik, penulisan script nya juga dipersingkat dengan jQuery, oh ya benar, saya membuatnya sebagai plugin untuk jQuery. Tapi setelah ditelusuri lebih dalam, ternyata ini bisa dikembangkan lebih jauh lagi, karena sebenarnya, script ini hanya berguna untuk textarea saja, mengingat input lain dapat menggunakan attribute maxlength untuk membatasi panjang karakter inputnya.

Muncul keinginan untuk menampilkan sisa karakter yang tersedia. Jadinya, ketika panjang maksimum adalah X karakter, maka setiap kali event keyup terjadi, script akan melakukan perhitungan jumlah karakter, dan meletakkan sisa karakter yang masih mungkin pada sebuah DOM yang ditentukan.

Plugin ini sudah bisa didownload dan digunakan, silakan lihat demo (dan sourcecodenya) disini.