121

I would like to have some functionality by which if I write

<textarea maxlength="50"></textarea>
<textarea maxlength="150"></textarea>
<textarea maxlength="250"></textarea>

it will automatically impose the maxlength on the textArea. If possible please do not provide the solution in jQuery.

Note: This can be done if I do something like this:

<textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50">

function imposeMaxLength(Event, Object, MaxLen)
{
    return (Object.value.length <= MaxLen)||(Event.keyCode == 8 ||Event.keyCode==46||(Event.keyCode>=35&&Event.keyCode<=40))
}

Copied from What is the best way to emulate an HTML input “maxlength” attribute on an HTML textarea?

But the point is I don't want to write onKeyPress and onKeyUp every time I declare a textArea.

1
  • 4
    maxlenth for textareas is in html5. Right now it works in Chrome but not Firefox.
    – Dave
    Dec 20, 2010 at 5:59

16 Answers 16

116
window.onload = function() { 
  var txts = document.getElementsByTagName('TEXTAREA'); 

  for(var i = 0, l = txts.length; i < l; i++) {
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { 
      var func = function() { 
        var len = parseInt(this.getAttribute("maxlength"), 10); 

        if(this.value.length > len) { 
          alert('Maximum length exceeded: ' + len); 
          this.value = this.value.substr(0, len); 
          return false; 
        } 
      }

      txts[i].onkeyup = func;
      txts[i].onblur = func;
    } 
  };

}
13
  • 3
    Josh it seems it will work but will u please explain what this thing will do --- if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { --- Jul 14, 2009 at 14:05
  • 2
    I think I remember what the deal is: either FF or IE (I think it's FF) returns a different string when Javascript checks the "value" attribute than what it sends back to the server when the form is posted! It has something to do with how hard line breaks do/don't get a carriage return character inserted. It's easy to figure out with some debug code on the client and server sides.
    – Pointy
    Apr 30, 2010 at 20:35
  • 7
    I switched the order of the alert and the value truncate - in the original order, the onkeyup would alert, causing the control to lose focus and the onblur to fire since the field had not been truncated yet. Jun 9, 2010 at 14:37
  • 1
    @JoshStodola - onblur will not handle the paste until the user clicks out of the textarea. onkeyup will not handle the paste if it is done through a context menu or a browser menu. This approach works if you do not need to screen for paste. See this answer for a timer based approach stackoverflow.com/a/10390626/1026459
    – Travis J
    Apr 30, 2012 at 21:18
  • 3
    @JoshStodola - Indeed you cannot. It would really annoy me as a user if I had pasted a whole piece of something in a textarea, clicked submit, and only saw a small portion of it go through without any response.
    – Travis J
    Apr 30, 2012 at 22:05
81

I know you want to avoid jQuery, but as the solution requires JavaScript, this solution (using jQuery 1.4) is the most consise and robust.

Inspired by, but an improvement over Dana Woodman's answer:

Changes from that answer are: Simplified and more generic, using jQuery.live and also not setting val if length is OK (leads to working arrow-keys in IE, and noticable speedup in IE):

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').live('keyup blur', function() {
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    // Trim the field if it has content over the maxlength.
    if (val.length > maxlength) {
        $(this).val(val.slice(0, maxlength));
    }
});

EDIT: Updated version for jQuery 1.7+, using on instead of live

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').on('keyup blur', function() {
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    // Trim the field if it has content over the maxlength.
    if (val.length > maxlength) {
        $(this).val(val.slice(0, maxlength));
    }
});
7
  • 1
    Nice Eirik, like the use of live (forgot about it!). Aug 8, 2011 at 21:40
  • 5
    I found bugs in live() and jQuery have since deprecated it. Use on() instead. If you care why: britishdeveloper.co.uk/2012/04/… May 10, 2012 at 10:30
  • 6
    But if they edited in the middle, this will kill the last character, not the new character, right?
    – Joe Mabel
    Jun 6, 2012 at 17:13
  • 6
    Yep used on() and it works like a gem. THanks. here's a modified and tweaked slightly fiddle: jsfiddle.net/nXMqc
    – B-Money
    Sep 26, 2012 at 21:39
  • 6
    Problem with slicing is that if you enter characters to the middle, they are inserted and the string is cut from end. If the whole text is not visible at once, this can be confusing. Also using the val(..) function to change the value seems to move the cursor to the end of the string. (if you want to test these with modern browser in fiddle, you need to remove the maxlength attribute - otherwise the browser will enforce the limit). Jan 20, 2013 at 23:16
33

Update Use Eirik's solution using .live() instead as it is a bit more robust.


Even though you wanted a solution that wasn't using jQuery, I thought I'd add one in for anyone finding this page via Google and looking for a jQuery-esque solution:

$(function() {        
    // Get all textareas that have a "maxlength" property.
    $('textarea[maxlength]').each(function() {

        // Store the jQuery object to be more efficient...
        var $textarea = $(this);

        // Store the maxlength and value of the field.
        var maxlength = $textarea.attr('maxlength');
        var val = $textarea.val();

        // Trim the field if it has content over the maxlength.
        $textarea.val(val.slice(0, maxlength));

        // Bind the trimming behavior to the "keyup" event.
        $textarea.bind('keyup', function() {
            $textarea.val($textarea.val().slice(0, maxlength));
        });

    });
});

Hope that is useful to you Googlers out there...

4
  • 1
    The keyup bound function should be: $(this).val($(this).val().slice(0, maxlength)); Apr 28, 2011 at 16:29
  • @brian Yup, you're correct. Thanks for spotting my error, fixed! Apr 28, 2011 at 22:14
  • $(this).val(function(i, val){ return val.slice(0, maxlength) }); Jul 31, 2011 at 12:54
  • this snippet is still helpful since line feeds are counted as 1 character in the browser and 2 in the server...
    – bebbo
    Jul 16, 2018 at 9:30
32

HTML5 adds a maxlength attribute to the textarea element, like so:

<!DOCTYPE html>
<html>
    <body>
        <form action="processForm.php" action="post">
            <label for="story">Tell me your story:</label><br>
            <textarea id="story" maxlength="100"></textarea>
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

This is currently supported in Chrome 13, FF 5, and Safari 5. Not surprisingly, this is not supported in IE 9. (Tested on Win 7)

5

This solution avoids the issue in IE where the last character is removed when a character in the middle of the text is added. It also works fine with other browsers.

$("textarea[maxlength]").keydown( function(e) {
    var key = e.which;  // backspace = 8, delete = 46, arrows = 37,38,39,40

    if ( ( key >= 37 && key <= 40 ) || key == 8 || key == 46 ) return;

    return $(this).val().length < $(this).attr( "maxlength" );
});

My form validation then deals with any issues where the user may have pasted (only seems to be a problem in IE) text exceeding the maximum length of the textarea.

4

This is some tweaked code I've just been using on my site. It is improved to display the number of remaining characters to the user.

(Sorry again to OP who requested no jQuery. But seriously, who doesn't use jQuery these days?)

$(function() {
    // Get all textareas that have a "maxlength" property.
    $("textarea[maxlength]").each(function() {

        // Store the jQuery object to be more efficient...
        var $textarea = $(this);

        // Store the maxlength and value of the field
        var maxlength = $textarea.attr("maxlength");

        // Add a DIV to display remaining characters to user
        $textarea.after($("<div>").addClass("charsRemaining"));

        // Bind the trimming behavior to the "keyup" & "blur" events (to handle mouse-based paste)
        $textarea.on("keyup blur", function(event) {
            // Fix OS-specific line-returns to do an accurate count
            var val = $textarea.val().replace(/\r\n|\r|\n/g, "\r\n").slice(0, maxlength);
            $textarea.val(val);
            // Display updated count to user
            $textarea.next(".charsRemaining").html(maxlength - val.length + " characters remaining");
        }).trigger("blur");

    });
});

Has NOT been tested with international multi-byte characters, so I'm not sure how it works with those exactly.

3

Also add the following event to deal with pasting into the textarea:

...

txts[i].onkeyup = function() {
  ...
}

txts[i].paste = function() {
  var len = parseInt(this.getAttribute("maxlength"), 10);

  if (this.value.length + window.clipboardData.getData("Text").length > len) {
    alert('Maximum length exceeded: ' + len);
    this.value = this.value.substr(0, len);
    return false;
  }
}

...
3
  • Could someone add this to the answer body if they think it's ok? Don't have enough points to do that yet.
    – stusherwin
    May 6, 2010 at 15:53
  • The paste function is not standardized. I believe it only works in IE. May 6, 2010 at 16:36
  • I updated my answer to handle the paste situation. Thank you! May 6, 2010 at 16:42
2

The maxlength attribute is supported in Internet Explorer 10, Firefox, Chrome, and Safari.

Note: The maxlength attribute of the <textarea> tag is not supported in Internet Explorer 9 and earlier versions, or in Opera.

from HTML maxlength Attribute w3schools.com

For IE8 or earlier versions you have to use the following

//only call this function in IE
function maxLengthLimit($textarea){
    var maxlength = parseInt($textarea.attr("maxlength"));
    //in IE7,maxlength attribute can't be got,I don't know why...
    if($.browser.version=="7.0"){
        maxlength = parseInt($textarea.attr("length"));
    }
    $textarea.bind("keyup blur",function(){
        if(this.value.length>maxlength){
            this.value=this.value.substr(0,maxlength);
        }
    });
}

P.S.

The maxlength attribute of the <input> tag is supported in all major browsers.

from HTML maxlength Attribute w3schools.com

2

You can use jQuery to make it easy and clear

JSFiddle DEMO

<textarea id="ta" max="10"></textarea>

<script>
$("#ta").keypress(function(e){

    var k = e.which==0 ? e.keyCode : e.which;
    //alert(k);
    if(k==8 || k==37 || k==39 || k==46) return true;

    var text      = $(this).val();
    var maxlength = $(this).attr("max");

    if(text.length >= maxlength) {
        return false;   
    }
    return true;
});
</script>

It is tested in Firefox, Google Chrome and Opera

3
  • I fear that when the handler is executed, text is filled with the "value" of the texarea before it has been updated. This means that your test should be if( text.length +1 > maxlength) {return false;}. Otherwise, one would only be able to put maxlength - 1 chars inside :/
    – Stphane
    Jun 3, 2015 at 12:57
  • Your fiddle lets the user enter one more character. IMO, your test should be either if(text.length+1 > maxlength) or if(text.length >= maxlength)...
    – Stphane
    Jun 5, 2015 at 8:36
  • Its not working as expected when I copy and paste the content Sep 14, 2015 at 12:13
1

Better Solution compared to trimming the value of the textarea.

$('textarea[maxlength]').live('keypress', function(e) {
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    if (val.length > maxlength) {
        return false;
    }
});
0

Small problem with code above is that val() does not trigger change() event, so if you using backbone.js (or another frameworks for model binding), model won't be updated.

I'm posting the solution worked great for me.

$(function () {

    $(document).on('keyup', '.ie8 textarea[maxlength], .ie9 textarea[maxlength]', function (e) {
        var maxLength = $(this).attr('maxlength');
        if (e.keyCode > 47 && $(this).val().length >= maxLength) {
            $(this).val($(this).val().substring(0, maxLength)).trigger('change');
        }
        return true;
    });

});
0

I implemented maxlength behaviour on textarea recently, and run into problem described in this question: Chrome counts characters wrong in textarea with maxlength attribute.

So all implementations listed here will work little buggy. To solve this issue I add .replace(/(\r\n|\n|\r)/g, "11") before .length. And kept it in mind when cuting string.

I ended with something like this:

var maxlength = el.attr("maxlength");
var val = el.val();
var length = val.length;
var realLength = val.replace(/(\r\n|\n|\r)/g, "11").length;
if (realLength > maxlength) {
    el.val(val.slice(0, maxlength - (realLength - length)));
}

Don't sure if it solves problem completely, but it works for me for now.

0

Try this jQuery which works in IE9, FF, Chrome and provides a countdown to users:

$("#comments").bind("keyup keydown", function() {
    var max = 500;
    var value = $(this).val();
    var left = max - value.length;
    if(left < 0) {
        $(this).val( value.slice(0, left) );
        left = 0;
    }
    $("#charcount").text(left);
}); 

<textarea id="comments" onkeyup="ismaxlength(this,500)"></textarea>
<span class="max-char-limit"><span id="charcount">500</span> characters left</span>
0

Try to use this code example:

$("#TextAreaID1").bind('input propertychange', function () {
    var maxLength = 4000;
    if ($(this).val().length > maxLength) {
        $(this).val($(this).val().substring(0, maxLength));
    }
});
0

2022 Update

You can set the HTML attribute for "maxlength" with the property maxLength (note the uppercase L). You might end up on this page if you were trying to use maxlength (all lowercase) and it wasn't working.

textareaElement1.maxLength = 50;
textareaElement2.maxLength = 150;
textareaElement3.maxLength = 250;

If you wanted to programmatically do it to all existing textareas, you could just iterate over a getElementsByTagName result:

const textAreas = document.getElementsByTagName('textarea');
for (const element of textAreas) {
    element.maxLength = 150;
}
-1

This is much easier:

<textarea onKeyPress="return ( this.value.length < 1000 );"></textarea>

1
  • 2
    Note that this solution doesn't fully replicate maxlength because you can paste strings in that are longer than the desired length.
    – Chris Bier
    Dec 10, 2015 at 3:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.