Char counter - adding to other text areas

JavaScript
1

Hi,
I’ve found this code http://jsfiddle.net/timur/47a7A/ (thanks whoever wrote it) which seems to do what i want except that it currently is only set for one text area and i would like to use it for multiple text areas. My JS isn’t good enough to know what i need to change but i know that i need to add (i assume) 2 variables. 1 being the id of the text area in question and 2 being the length limit for each text area.

If you could help that would be most appreciated

$(document).ready(function() {
    var text_max = 99;
    $('#textarea_feedback').html(text_max + ' characters remaining');

    $('#textarea').keyup(function() {
        var text_length = $('#textarea').val().length;
        var text_remaining = text_max - text_length;

        $('#textarea_feedback').html(text_remaining + ' characters remaining');
    });
});
2

Hi,

This is probably not the neatest way to do it but should work OK.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.textarea-wrap{margin:10px 25px 0 10px;}
</style>
</head>

<body>
<div class="textarea-wrap">
		<textarea class="textarea" id="textarea" rows="8" cols="30" maxlength="99" ></textarea>
		<div class="textarea_feedback"></div>
</div>
<div class="textarea-wrap">
		<textarea class="textarea"  id="textarea2" rows="8" cols="30" maxlength="99" ></textarea>
		<div class="textarea_feedback"></div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
$(document).ready(function() {
    var text_max = 99;
    $('.textarea_feedback').html(text_max + ' characters remaining');

    $('.textarea').keyup(function() {
				var theTextarea = $(this);
				var theTextareaFeedback = $(this).closest('.textarea-wrap').find('.textarea_feedback');	
        var text_length = theTextarea.val().length;
        var text_remaining = text_max - text_length;
        theTextareaFeedback.html(text_remaining + ' characters remaining');
    });
});

</script>
</body>
</html>
3

awesome thanks but how would i change the text limit for each one. Could that be passed to the function somehow by picking up the maxlength?

thanks

4

Yes you could use the max-length to determine the character limit.

Something like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.textarea-wrap {
	margin:10px 25px 0 10px;
}
</style>
</head>

<body>
<div class="textarea-wrap">
		<textarea class="textarea" id="textarea" rows="8" cols="30" maxlength="99" ></textarea>
		<div class="textarea_feedback"></div>
</div>
<div class="textarea-wrap">
		<textarea class="textarea"  id="textarea2" rows="8" cols="30" maxlength="299" ></textarea>
		<div class="textarea_feedback"></div>
</div>
<div class="textarea-wrap">
		<textarea class="textarea"  id="textarea2" rows="8" cols="30" maxlength="120" ></textarea>
		<div class="textarea_feedback"></div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
$(document).ready(function() {
    $( ".textarea" ).each(function( index ) {
  	 var text_max = $(this).attr('maxlength');
		 $(this).closest('.textarea-wrap').find('.textarea_feedback').html(text_max + ' characters remaining');
		});
		
    $('.textarea').keyup(function() {
				var text_max =  parseInt($(this).attr('maxlength'));
				var theTextarea = $(this);
				var theTextareaFeedback = $(this).closest('.textarea-wrap').find('.textarea_feedback');	
        var text_length = theTextarea.val().length;
        var text_remaining = text_max - text_length;
        theTextareaFeedback.html(text_remaining + ' characters remaining');
    });
});

</script>
</body>
</html>

I’m sure it could be tidied up a bit by one of the experts here :smile:

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.