Limit the Characters in textarea in jquery

Question

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?

What do you mean by 'limit'? Do you want to add a validation prohibiting entering too many characters? — dratewka, May 06 '13 at 09:33
possible duplicate of [textarea character limit](http://stackoverflow.com/questions/5533053/textarea-character-limit) — dsgriffin, May 06 '13 at 09:34
Another duplicate - http://stackoverflow.com/questions/5292235/max-characters-in-textarea-with-jquery — dsgriffin, May 06 '13 at 09:34

score 5 · Accepted Answer · answered May 06 '13 at 09:55

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.

Didn't know someone still use font element and size attributes in 2013 :) — enguerranws, Oct 29 '13 at 14:15

filoxo · Answer 2 · 2015-04-15T17:45:50.727

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>

demo | on Github

score 1 · Answer 3 · answered May 06 '13 at 09:35

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 doesn't take pasting text into account. – pizzamonster Sep 18 '19 at 18:42 — pizzamonster, Sep 18 '19 at 18:42

score 1 · Answer 4 · answered Sep 03 '16 at 15:32

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();
        }
    });
 });

Thanks, `.on('keydown'...` was a bit more clean for me. – RobbTe Jul 19 '18 at 08:35 — RobbTe, Jul 19 '18 at 08:35

score 0 · Answer 5 · answered May 06 '13 at 09:33

0

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);

answered May 06 '13 at 09:33

paulitto

4,585
2
22
28

pizzamonster · Answer 6 · 2019-09-18T18:48:41.827

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>

Limit the Characters in textarea in jquery

6 Answers6

Linked