How to:Set Maxlength of Textarea using jQuery/JavaScript

gaurav says:

cool code.. Thanks viral .. .this code helps me a lot..

webcook says:

hi viral
great job thanks :D

Viral says:

Thanks Webcook for the comment. :)

M12 G12 Visão Celular says:

Very good, but on paste large texts this script crashes….

SS says:

Good Code. But not handled the paste situation

Suji says:

ya its great code!!!
If we want to Set Max Length TextArea OnPaste
use the following code
function maxLengthPaste(field,maxChars){
event.returnValue=false;
if((field.value.length + window.clipboardData.getData(\"Text\").length) > maxChars) {
return false;
}
event.returnValue=true;
}

Use OnPaste Went To Call This Function
onpaste=\"return maxLengthPaste(this,500)\"

Juanpe says:

And the space key?

Breaking News says:

You should not use a strict doctype, when you use this on your own pages, as there is no “maxlength” attribute defined in textarea. A “great” solution should include that information, at least, then show a way out of the dilemma.

I do actually use a quite similar solution for my textareas, but neither am I happy about it, nor would I call my idea a great solution. It is the usual crap, which the W3C imposes on us.

Anthony says:

I have extended this in my own use to be able to take an extra setting to say what the attribute should be. I did this because when I am using asp.net, their standard textbox with multiline set removes the MaxLength property during rendering and never makes it to the screen.

Thanks for this plugin.

Victor says:

SPACE character checks.

Add the following before the current check for keystrokes. This keeps the user from entering spaces.

// If current length is equal to the max and they enter
// a space using the space bar then cancel
if (key == 32) {
var maxLength = $(this).attr(“maxlength”);
var length = this.value.length;
if (length == maxLength) {
event.preventDefault();
return;
}
}

ZK@Web Marketing Blog says:

I would like to have certain specific elements have a greater z-index than inital set vale as lorenzo suggests, however am not sure what extra jQuery code i need to do this, have tried
$(”.bridge”).css(”z-index”,”50000″); but dosent seem to have any effect, if anyone can point me in right direction be much appreciated

Dave says:

This is a simple plugin that worked for exactly what I needed.

As of jQuery 1.3 though, the @attr syntax is no longer being used. Moving forward you should change \"textarea[@maxlength]\" to \"textarea[maxlength]\" in the plugin.

Andrea says:

Does not work with COPY/PASTE.

Akash Bavlecha says:

Make it work when copying and paste text into text area above!

thomasp says:

It’s works if you CHANGE $(“textarea[@maxlength]”) TO $(“textarea[maxlength]”) on line 16.
I think that @ selector are depreciated.

BenTheTipsyBear says:

This would be much more useful revised to recalculate with spaces and backspaces.
The cut and paste issue should be rolled in as well…
Thanks!

BenTheTipsyBear says:

Okay – the spaces and backspaces are easy enough to add:
Replace:
if(key >= 33 || key == 13) {
With:
if(key >= 32 || key == 13 || key == 8) {

Cheers!

Gurinder says:

Try pasting a long text , This plugin will fail.

Zachary Burt says:

My version, compatible with jQuery 1.3

$("textarea[maxlength]").keypress(function(event){
		var key = event.which;

		//all keys including return.
		if(key >= 33 || key == 13) {
			var maxLength = $(this).attr("maxlength");
			var length = this.value.length;
			if(length == maxLength) {
				event.preventDefault();
				$("#error_field").html('Maximum length is 120 characters.');				
			}		
		}
	});

Max says:

Hi
Here’s another way to do it.
http://www.problemquestionsolution.com/View/JavaScript/Textarea-maxlength

Murali says:

Please have a look into this

http://that-matt.com/2010/04/updated-textarea-maxlength-with-jquery-plugin/

Deepak says:

wont work for below text….. :(

ああsだどいういえｒをるおいうこくおいううぇｒｙをりｙをれｙをりょしよzｘｃｙぞこいいぇろうぇいｒｙをyを得ｒｗいぇおｒｙをえｒｙをえｒｙをえりょああだづいういあしあいやいしゃいｓｙぢあぢぃあｓぢぃあぢゃいぢゃいうぢゃいうぢゃいうぢゃいうぢゃいづやsぢうあyぢあyぢあぢぃあぢゃいうぢゃいうぢゃいづやいうぢゃいうぢゃいうsぢゃ位末dチャイウェ地亜謝意やいうえやいうえりぃえとぃｒｙうぇいｒｙｗりｗｙりうｗいぇりｗｒｙうぃえうｒｙうぃｒｙうぃえる

any suggestion will be appreciated…. thanks in advance…

GFoley83 says:

Updated version for jQuery 1.3+ which also includes text boxes and prevents spaces in IE.

jQuery.fn.maxlength = function(){ 
    $('textarea[maxlength], input[maxlength]').keypress(function(event){
        var key = event.which; 
        //all keys including return and space.
        if(key >= 32 || key == 13) {
            var maxLength = $(this).attr('maxlength');
            var length = this.value.length;
            if(length >= maxLength) { 
                event.preventDefault();
            }
        }
    });
}

mike says:

Do you know how to deal if they copy from cliboard data your Jquery code doesn’t handle it.
Thanks

David says:

hi, sorry it can’t work

David says:

below is my code,please help me, it can’t work

Maxlength Textbox jQuery Plugin

jQuery(document).ready(function($) {
//Set maxlength of all the textarea (call plugin)
$().maxlength();
})

Maxlength 20

Maxlength 50

No Maxlength

chandan says:

not working when placing space instead of any text

Jazz says:

you can use this instead of the jquery plugin, works great:

add this javascript function on a script section or an include file:

function ismaxlength(obj)
{
var mlength=obj.getAttribute? parseInt(obj.getAttribute(“maxlength”)) : “”
if (obj.getAttribute && obj.value.length>mlength)
obj.value=obj.value.substring(0,mlength)
}

then, when you define your textarea:

that’s it, it works with copy/paste, spaces, anything.

dany says:

there is crash with another plugin jquery..

Darshana Umakanth says:

Thanks, Viral! Worked like a charm :)

Bharat says:

Thanks Viral. I am trying to use this plugin with struts2 tag s:textarea but haven’t succeeded yet. Do you know if this works with strats2 tag library tag ?

Venu says:

How can we include this pluggin code into another JS file or can we do it liek that…?

Christopher Roldan says:

Where in the theme do you input the code in? I’m a “newbie” to this and any help would be great! Thanks everyone

dupia says:

hi,
i’m working on mobile app…(using jquey mobile ) below is my code for textarea

if i open this in IE Browser, it doesnot show its actual size.
can you pls help me on this