I want to Limit the characters in a textare in jquery .here is my jquery code
$('#editnote-tooltip-wrapper').appendTo($(this).closest('.editnote-tip-wrapper')).fadeIn(300).css({ 'position': 'absolute', 'left': 0, 'top': 0, 'z-index': '10000' }).find('.content').html('<textarea cols="5" rows="5" class="elastic" style="overflow: hidden; height: 150px;"></textarea>' + $html); how can I make this possible.anyone help?
to limit the character you can just use maxlength attribute of html. like <textarea cols="5" rows="5" class="elastic" style="overflow: hidden; height: 150px;" maxlength="500"></textarea>
anyhow it is not going to work in ie9 but you can follow the below code.
<form name="myform"> <textarea name="limitedtextarea" onKeyDown="limitText(this.form.limitedtextarea,this.form.countdown,100);" onKeyUp="limitText(this.form.limitedtextarea,this.form.countdown,100);"> </textarea><br> <font size="1">(Maximum characters: 100)<br> You have <input readonly type="text" name="countdown" size="3" value="100"> characters left.</font> </form> Refer this page!!. for more info.
jQuery Limit is a lightweight plugin (~6 Kb) "that limits the number of characters that can be entered in a textarea or input field. The plugin can also report the number of characters left before the user reaches the length limit."
Only two elements are needed: a textarea or input field, and another element (in the below example, a span) to display how many characters are available. Its super simple and easy to use.
You have <span id="charsLeft"></span> chars left. <textarea id="myTextarea"></textarea> <script type="text/javascript"> $('#myTextarea').limit('140','#charsLeft'); </script> You can refer this link which has the details and a sample. you can give this a try. code is
$(document).ready( function() { var maxLen = 10; $('#send-txt').keypress(function(event){ var Length = $("#send-txt").val().length; var AmountLeft = maxLen - Length; $('#txt-length-left').html(AmountLeft); if(Length >= maxLen){ if (event.which != 8) { return false; } } }); }); 
This is completely working for me.
<textarea name="txtScript" id="word_count" cols="30" rows="10"></textarea> <br> Total word Count : <span id="display_count">0</span> words. Words left : <span id="word_left">10</span> $(document).ready(function() { $("#word_count").on('keydown', function(e) { var words = $(this).val().length; if (words <= 10) { $('#display_count').text(words); $('#word_left').text(10-words) }else{ if (e.which !== 8) e.preventDefault(); } }); }); 
.on('keydown'... was a bit more clean for me.you may use maxlength attribute for the textarea
For example this one will limit characters to 10
.html('<textarea maxlength="10" cols="5" rows="5" class="elastic" style="overflow: hidden; height: 150px;"></textarea>' + $html); Please keep in mind that the user can also past text. Using keypress is wrong, you will have to use the keyup event like so:
$('#my-textarea').keyup(function(event){ var $field = $('#my-textarea'); var $left = $('#my-textarea-length-left'); var len = $field.val().length; if (len >= 300) { $field.val( $field.val().substring(0, 299) ); $left.text(0); if (event.which != 8) { return false; } } $left.text(300 - len); }); This limits the textarea with id "my-textarea" to 300 characters and shows the amount left in a span or div with the id "my-textarea-length-left".
It properly handles text paste.
HTML Markup:
<textarea rows="4" id="my-textarea"></textarea> <span id="my-textarea-length-left"></span>