CODEWITHSUNDEEP
jquery
Arun
Arun

Reputation: 1472

Limit the Characters in textarea in jquery

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?

Upvotes: 2

Views: 17038

Answers (6)

pizzamonster
pizzamonster

Reputation: 1266

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>

Upvotes: 0

Ahmad Sayeed
Ahmad Sayeed

Reputation: 354

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

Upvotes: 1

filoxo
filoxo

Reputation: 8390

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

Upvotes: 2

Sai Chaithanya
Sai Chaithanya

Reputation: 708

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.

Upvotes: 5

Saravanan
Saravanan

Reputation: 7854

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

});

Upvotes: 1

paulitto
paulitto

Reputation: 4673

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

Upvotes: 0

Related Questions