Halo programmer,

Sudah lama sekali ngga update, entah masih ada pengunjung atau ngga, yg penting terus nulis dan bermanfaat. Kali ini membahas tentang menghitung sisa karakter di suatu form, terserah mau pake input type:text,password,dll atau pake textarea juga bisa syaratnya hanya menaruh tag "maxlength" di setiap element yg mau dibaca. (kenapa maxlength? element minoritas yg jarang digunakan dan jika digunakan sekalipun biasanya hanya beberapa element) Langsung aja ya, dibawah ini nih contoh elementnya (contoh kali ini menggunakan textarea)

<textarea class="form-control" maxlength="160" rows="5" name="Kirim[pesan]" id="Kirim_pesan"></textarea>

Lalu, dibawah ini scriptnya, jika sisa karakter kurang dari 20 warna font nya berubah jadi merah.

var supportOnInput = 'oninput' in document.createElement('input');

	$("textarea[maxlength]").each(function() {
	    var $this = $(this);
	    var maxLength = parseInt($this.attr('maxlength'));
	    $this.attr('maxlength', 160);
	    
	    var el = $("<div class="help-block">" + maxLength + " karakter</div>");
	    el.insertAfter($this);
	    
	    $this.bind(supportOnInput ? 'input' : 'keyup', function() {
	        var cc = $this.val().length;
	        
	        el.text((maxLength-cc)+" karakter");
	        
	        if((maxLength-20) < cc) {
	            el.css('color', 'red');
	        } else {
	            el.css('color', null);
	        }
	    });
	});

Uda paham kan? semoga bermanfaat 🙂