How to:Set Maxlength of Textarea using jQuery/JavaScript

Maxlength of Textarea

Update: The maxlength plugin is now managed at GitHub. Please contribute to make this plugin more awesome.
GitHub: https://github.com/viralpatel/jquery.maxlength

Setting up maxlength of input text are easy. Just an attribute maxlength="##" does the work. But maxlength attribute does not work with textarea. I tried writing <textarea rows=”5″ cols=”30″ maxlength=”120″></textarea> but this does not works.

So what to do if we want to fix the maxlength of a textarea?

Use following jQuery plugin for setting maxlength of any textarea on your page.

First thing for doing is to add maxlength="XX" attribute in your <textarea> tag.

<textarea maxlength="15" rows="5" cols="30" name="address"></textarea>

Include the jQuery plugin javascript file in your html page where the textarea is.

<script language="javascript" src="jquery.maxlength.js"></script>

And, add following code snippet at the end of your html page.

<script type="text/javascript">
	jQuery(document).ready(function($) {
        	 //Set maxlength of all the textarea (call plugin)
        	 $().maxlength();
	})
</script>

That’s it.. This jQuery plugin will search every textarea on your page and restrict the user to enter text till the maxlength.

Following is the code of plugin

/*
 * jQuery Maxlength plugin 1.0.0
 *
 * Copyright (c) 2013 Viral Patel
 * http://viralpatel.net
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 */

;(function ($) {

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

})(jQuery);

Demo

Download

GitHub: https://github.com/viralpatel/jquery.maxlength

Download the Plugin file here. jQuery Plugin for setting maxlength of textarea.

Feel free to extend the functionality of this plugin and also use it and let me know your comments.



36 Comments

  • gaurav 19 December, 2008, 14:31

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

  • webcook 21 January, 2009, 17:57

    hi viral
    great job thanks :D

  • Viral 21 January, 2009, 18:51

    Thanks Webcook for the comment. :)

  • M12 G12 Visão Celular 24 January, 2009, 1:03

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

  • SS 26 March, 2009, 19:17

    Good Code. But not handled the paste situation

  • Suji 31 March, 2009, 12:22

    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 1 April, 2009, 6:17

    And the space key?

  • Breaking News 6 April, 2009, 19:26

    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 8 April, 2009, 13:59

    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 14 May, 2009, 18:52

    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 21 June, 2009, 10:36

    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 6 August, 2009, 23:11

    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 13 August, 2009, 15:14

    Does not work with COPY/PASTE.

  • Akash Bavlecha 10 November, 2009, 15:00

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

  • thomasp 8 December, 2009, 14:25

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

  • BenTheTipsyBear 13 February, 2010, 3:22

    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 13 February, 2010, 3:32

    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 22 February, 2010, 5:20

    Try pasting a long text , This plugin will fail.

    • Viral Patel 23 February, 2010, 15:50

      @Gurinder: Ofcourse pasting something will not work as already mentioned above. I will soon modify the code and try to fix this. :)

  • Zachary Burt 26 February, 2010, 4:13

    My version, compatible with jQuery 1.3

    	$("textarea[maxlength]").keypress(function(event){
    		var key = event.which;
    
    		//all keys including return.
    		if(key &gt;= 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 15 March, 2010, 21:53

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

  • Murali 18 November, 2010, 18:29

    Please have a look into this

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

  • Deepak 30 November, 2010, 11:10

    wont work for below text….. :(

    ああsだどいういえrをるおいうこくおいううぇryをりyをれyをりょしよzxcyぞこいいぇろうぇいryをyを得rwいぇおryをえryをえryをえりょああだづいういあしあいやいしゃいsyぢあぢぃあsぢぃあぢゃいぢゃいうぢゃいうぢゃいうぢゃいうぢゃいづやsぢうあyぢあyぢあぢぃあぢゃいうぢゃいうぢゃいづやいうぢゃいうぢゃいうsぢゃ位末dチャイウェ地亜謝意やいうえやいうえりぃえとぃryうぇいrywりwyりうwいぇりwryうぃえうryうぃryうぃえる

    any suggestion will be appreciated…. thanks in advance…

  • GFoley83 27 January, 2012, 7:43

    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 &gt;= 32 || key == 13) {
                var maxLength = $(this).attr('maxlength');
                var length = this.value.length;
                if(length &gt;= maxLength) { 
                    event.preventDefault();
                }
            }
        });
    }
    
  • mike 2 February, 2012, 0:42

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

  • David 5 June, 2012, 12:56

    hi, sorry it can’t work

  • David 5 June, 2012, 13:05

    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 20 December, 2012, 16:35

    not working when placing space instead of any text

  • Jazz 25 February, 2013, 21:35

    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.

    • Jazz 25 February, 2013, 21:36

      this is how you define the textarea:

      <textarea id='OriginalContent' name='OriginalContent' class='form' rows='5' cols='70' maxlength='5' onkeyup='return ismaxlength(this);'></textarea>
      
  • dany 1 March, 2013, 13:05

    there is crash with another plugin jquery..

  • Darshana Umakanth 13 June, 2013, 2:15

    Thanks, Viral! Worked like a charm :)

  • Bharat 25 January, 2014, 2:25

    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 18 March, 2014, 12:49

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

  • Christopher Roldan 25 April, 2014, 23:24

    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 8 May, 2014, 14:48

    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

Leave a Reply

Your email address will not be published. Required fields are marked *

Note

To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]

Current day month ye@r *