120

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.

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

16 Answers 16

Reset to default
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; } }; }
Improve this answer
Sign up to request clarification or add additional context in comments.

13 Comments

Josh it seems it will work but will u please explain what this thing will do --- if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { ---
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.
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.
@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
@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.
|
80

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)); } });
Improve this answer

7 Comments

Nice Eirik, like the use of live (forgot about it!).
I found bugs in live() and jQuery have since deprecated it. Use on() instead. If you care why: britishdeveloper.co.uk/2012/04/…
But if they edited in the middle, this will kill the last character, not the new character, right?
Yep used on() and it works like a gem. THanks. here's a modified and tweaked slightly fiddle: jsfiddle.net/nXMqc
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).
|
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...

Improve this answer

4 Comments

The keyup bound function should be: $(this).val($(this).val().slice(0, maxlength));
@brian Yup, you're correct. Thanks for spotting my error, fixed!
$(this).val(function(i, val){ return val.slice(0, maxlength) });
this snippet is still helpful since line feeds are counted as 1 character in the browser and 2 in the server...
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)

Improve this answer

Comments

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.

Improve this answer

Comments

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.

Improve this answer

Comments

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; } } ...
Improve this answer

3 Comments

Could someone add this to the answer body if they think it's ok? Don't have enough points to do that yet.
The paste function is not standardized. I believe it only works in IE.
I updated my answer to handle the paste situation. Thank you!
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

Improve this answer

Comments

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

Improve this answer

3 Comments

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 :/
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)...
Its not working as expected when I copy and paste the content
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; } });
Improve this answer

Comments

1

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; }
Improve this answer

Comments

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; }); });
Improve this answer

Comments

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.

Improve this answer

Comments

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>
Improve this answer

Comments

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)); } });
Improve this answer

Comments

-1

This is much easier:

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

Improve this answer

1 Comment

Note that this solution doesn't fully replicate maxlength because you can paste strings in that are longer than the desired length.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.