Text Area maxlength not working

Question

I want to set maximum length to the textarea. I am using following code for the same,but it is not working,

<textarea name="txtDescription" cols=10 rows=3 maxlength=50></textarea>

But it is not working,it takes characters beyond 50.

possible duplicate of [How to impose maxlength on textArea in HTML , Javascript](http://stackoverflow.com/questions/1125482/how-to-impose-maxlength-on-textarea-in-html-javascript) — Dominic Rodger, Aug 16 '10 at 08:35

score 4 · Answer 1 · edited Mar 04 '20 at 12:33

4

Yup maxlength does not work in textarea. But you can use jQuery something like this:

var $limitNum = 500;
$('textarea[name="textarea_name"]').keydown(function() {
    var $this = $(this);

    if ($this.val().length > $limitNum) {
        $this.val($this.val().substring(0, $limitNum));
    }
});

edited Mar 04 '20 at 12:33

Douwe de Haan

6,247
1
30
45

answered Apr 01 '14 at 04:18

phagento

410
4
13

score 4 · Accepted Answer · answered Aug 16 '10 at 08:29

4

There's no maxlength attribute defined for textarea. You need to implement this using javascript.

answered Aug 16 '10 at 08:29

Darin Dimitrov

1,023,142
271
3,287
2,928

4

Your own "implement" link says it's supported for HTML5. – Amin Ariana Apr 09 '14 at 01:05
@AminAriana it is now, where it wasn't when this answer was created and accepted. – Douwe de Haan May 02 '18 at 11:38
`textarea` does have [maxlength](https://www.w3.org/TR/2011/WD-html5-author-20110809/the-textarea-element.html#attr-textarea-maxlength) now. – Sнаđошƒаӽ Aug 25 '23 at 11:19

Luiggi ZAMOL · Answer 3 · 2017-11-29T17:27:41.023

I tried maxlength in textarea, but does not count the characters correctly(also counts the EOLs). I use max_length attribute instead of normal maxlength.

HTML:

<textarea name="whatever" max_length="100"></textarea>

JS:

$('textarea').keyup(function(){
  var maxlength = parseInt($(this).attr('max_length')),
      text = $(this).val(),
      eol = text.match(/(\r\n|\n|\r)/g),
      count_eol = $.isArray(eol) ? eol.length : 0,//error if eol is null
      count_chars = text.length - count_eol;
  if (maxlength && count_chars > maxlength)
    $(this).val(text.substring(0, maxlength + count_eol));
});

score 2 · Answer 4 · answered May 02 '18 at 11:44

2

When the answer of Darin Dimitrov was posted back in 2010, the maxlength attribute wasn't implemented apparently.

Right know, in 2018, it is.

Sources

caniuse
MDN

Example

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <label for="without">Without maxlength</label>
  <textarea id="without" class="form-control"></textarea>
  <br>
  <label for="with">With maxlength="10"</label>
  <textarea id="with" maxlength="10" class="form-control"></textarea>
</div>

answered May 02 '18 at 11:44

Douwe de Haan

6,247
1
30
45

But as you see its not working properly if you break lines you get the result that value.length < maxLength - this is the issue here :/ If you have any better solution, will be glad to hear. thanks! – Vano Feb 18 '20 at 07:52
@Vano I Use Chrome and I can't type more than 10 break lines or for example 5 break lines and 5 characters (I assume you mean pressing the Enter key?) – Douwe de Haan Feb 19 '20 at 08:05
Yes, the issue happens when you press enter, in Chrome it works fine but on Safari it doesn't. So basically if you limit textarea let's say maxLength=100 and you press enter 5 times, when you reach max limit - you end up that textarea value.length === 95. – Vano Feb 19 '20 at 08:09
@Vano I see what you mean. If you want to prevent that, have a look at [this answer](https://stackoverflow.com/questions/36004311/textarea-val-length-not-counting-enter-line-breaks-in-chrome). It is a “problem” with JavaScript, but can be worked around. – Douwe de Haan Feb 19 '20 at 23:30

score 0 · Answer 5 · answered Oct 23 '15 at 17:07

Answers above are correct for earlier version of IE 10.

If you are having problem with maxlength attribure, my recommendation is check your browser version first. The maxlength attribute is new for the tag in HTML5. It should be just fine on IE 10+ or Chrome.

score -1 · Answer 6 · answered Jan 30 '18 at 10:11

-1

you can use

<textarea name="testString" onkeypress="if (this.value.length >= 250) { return false; }"id="" cols="30" rows="10" maxlength="250"></textarea>

answered Jan 30 '18 at 10:11

Tassadaq Hussain

19
2

score -1 · Answer 7 · answered Apr 25 '11 at 14:49

-1

Maxlength attribute for textarea works in Chrome.

answered Apr 25 '11 at 14:49

Frank Nwoko

3,816
5
24
33

score -3 · Answer 8 · answered Sep 26 '15 at 07:52

-3

You need to put it into the HTML tag like this, make sure you have airquotes "".

<textarea maxlength="5"></textarea>

answered Sep 26 '15 at 07:52

Lion

121
1
10

score -3 · Answer 9 · edited Sep 07 '17 at 13:59

-3

This works for Ruby on Rails :

:maxlength => "10"

code example:

<%= text_area 'order', 'special_instructions_display', :size => "85x7", :maxlength => "10"  %>

edited Sep 07 '17 at 13:59

Eric Aya

69,473
35
181
253

answered Sep 07 '17 at 13:56

FarrahH

1
1

score -4 · Answer 10 · edited May 02 '18 at 12:16

-4

please use jquery for reference

<script type="text/javascript">  
$().ready(function(){   

     $("#textareaId").attr('maxlength','20');   

 });
</script>

edited May 02 '18 at 12:16

Aman Kaushik

13
5

answered Aug 16 '10 at 08:32

user335160

1,364
6
32
67

1

SCRIPT438: Object doesn't support property or method 'maxLength' – Raghav May 14 '13 at 05:36

Text Area maxlength not working

10 Answers10

Linked