Below is a html code which creates a textarea and a span tag for displaying total remaining character to reach maximum length of textarea.
<html>
<head><title>Character Counting remaining example in jquery</title></head>
<body>
<textarea type="textarea" id="textarea_id" maxlength=120></textarea><br />
<span id="remaining_character"></span>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="character_counting_remaining.js"></script>
</body>
</html>
Below is a jquery code for counting of remaining text in textarea.
//character_counting_remaining.js
$(document).ready(function(){
var max_length = 120;
$('#remaining_character').html(max_length + ' characters remaining');
$('#textarea_id').keyup(function(){
var text_length = $('#textarea_id').val().length;
var text_remaining = max_length - text_length;
$('#remaining_character').html(text_remaining + ' characters remaining');
});
});
<html>
<head><title>Character Counting remaining example in jquery</title></head>
<body>
<textarea type="textarea" id="textarea_id" maxlength=120></textarea><br />
<span id="remaining_character"></span>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="character_counting_remaining.js"></script>
</body>
</html>
Below is a jquery code for counting of remaining text in textarea.
//character_counting_remaining.js
$(document).ready(function(){
var max_length = 120;
$('#remaining_character').html(max_length + ' characters remaining');
$('#textarea_id').keyup(function(){
var text_length = $('#textarea_id').val().length;
var text_remaining = max_length - text_length;
$('#remaining_character').html(text_remaining + ' characters remaining');
});
});
 |
| fig : output of above code |
No comments:
Post a Comment