Improved Character Counting Remaining on Textarea
text area with maxlenght that
feeds how many characters the user has remaining
HTML
<textarea rows="8" cols="30" maxlength="99" data-max="99" placeholder="I got 99 problems, but characters ain't one of them"></textarea>
<span class="char-max-alert"></span>
<br>
<br>
<textarea rows="8" cols="30" maxlength="999" data-max="999" placeholder="999 bottles of beer on the wall"></textarea>
<span class="char-max-alert"></span>
JavaScript
$(document).ready(function() {
$('*[data-max]').keyup(function() {
// get the max chars for the input
var text_max = $(this).data('max');
// compute current length
var text_length = $(this).val().length;
// compute chars remaining
var text_remaining = text_max - text_length;
// display
$(this).next('.char-max-alert').html(text_remaining + ' characters remaining');
});
});