Maxlength for text area doesn't work in IE

Question

I am trying to limit the number of characters entered in a textarea as shown:

<div>
 @Html.TextAreaFor(x => x.StudentName, new { @maxlength = "1000" })
</div>

This works fine in Firefox and Chrome but the maxlength attribute doesn't work in IE. How do I do that??

See http://stackoverflow.com/questions/1125482/how-to-impose-maxlength-on-textarea-in-html-using-javascript — Tim M., Feb 02 '12 at 08:44
@leppie - because last time I searched for a maxlength script that worked in all cases, I ended up writing my own. The post I linked to is over 18 months old; there may be a better solution out there but I figured it would give the OP somewhere to start at least. Just my opinion. — Tim M., Feb 02 '12 at 08:49

score 17 · Accepted Answer · edited May 23 '17 at 12:01

17

The maxlength attribute is not standard for <textarea> in HTML 4.01. It is defined in HTML5 though but I guess IE doesn't implement it. To make it work across all browsers you could use javascript. Here's an example.

edited May 23 '17 at 12:01

Community

1
1

answered Feb 02 '12 at 08:44

Darin Dimitrov

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

It does work in IE10 according to this chart from wufoo: http://wufoo.com/html5/attributes/03-maxlength.html – Case Aug 14 '12 at 00:45
1

@Sharon, IE10 is not RTM yet. – Darin Dimitrov Aug 14 '12 at 05:13
Yes it does work in IE10+. Only IE9 and less is an issue. It is a very good solution for the problem!!! – Kremena Lalova Oct 01 '14 at 16:15

Walter Stabosz · Answer 2 · 2018-02-26T21:41:24.723

Here is my jQuery based solution. Works well in IE9, a little wonky in IE8.

// textarea event handler to add support for maxlength attribute
$(document).on('input keyup', 'textarea[maxlength]', function(e) {
    // maxlength attribute does not in IE prior to IE10
    // http://stackoverflow.com/q/4717168/740639
    var $this = $(this);
    var maxlength = $this.attr('maxlength');
    if (!!maxlength) {
        var text = $this.val();

        if (text.length > maxlength) {
            // truncate excess text (in the case of a paste)
            $this.val(text.substring(0,maxlength));
            e.preventDefault();
        }

    }

});

http://jsfiddle.net/hjPPn/

link for IE8: http://jsfiddle.net/hjPPn/show

Native Browser Support

Also, in case you're wondering which browsers do support maxlength: https://caniuse.com/#search=maxlength

score 3 · Answer 3 · answered Feb 06 '13 at 21:35

3

You can use javascript as well, which is way easier:

<textarea  name="question" cols="100" rows="8" maxlength="500px" onKeyPress="return ( this.value.length < 1000 );"></textarea>

answered Feb 06 '13 at 21:35

erdomester

11,789
32
132
234

@MatthiasDailey If you're using jQuery, my answer handles pasting. It could probably be refactored to pure JS. – Walter Stabosz Apr 08 '14 at 20:32
10

Why do you have a px for maxlength? That's not what it's for. – Jon Davis Aug 18 '14 at 07:01
1

Burying Javascript in your HTML might seem 'easy' to you, but I hope I never have to maintain your code! – Michael Scheper Dec 28 '15 at 05:57

score 1 · Answer 4 · answered Oct 26 '12 at 09:20

1

Use the following Jquery - for eg, if you want to restrict the length to 48

$("textarea").keypress(function(e){
    var lengthF = $(this).val();

    if (lengthF.length > 48){
        e.preventDefault();
    }
});

answered Oct 26 '12 at 09:20

Sunil Soundarapandian

158
2
9

3

this fails when the user tries to press delete or backspace. The user will be stuck after reaching the limit – Mandeep Jain May 14 '13 at 17:01

Maxlength for text area doesn't work in IE

4 Answers4

Native Browser Support

Linked

Related