javascript - maxLength in IE8

Question

Using a javascript function to prevent exceeding the length of a textfield, but to still allow pasting & editing within it. Needs to work in IE8 & Firefox.

$(function() {
    var helper = document.createElement('textarea');
    //if (!('maxLength' in helper)) {
        var supportsInput = 'oninput' in helper,
            ev = supportsInput ? 'input' : 'propertychange paste keyup',
            handler = function() {
                var maxlength = +$(this).attr('maxlength');
                if (this.value.length > maxlength) {
                    this.value = this.value.substring(0, maxlength);
                }
            };

        $('textarea[maxlength]').on(ev, supportsInput ? handler : function() {
            var that = this;
            setTimeout(function() {
                handler.call(that);
            }, 0);
        });
    //}

});

It works okay if the text is on one line (testing with maxLength = 25). However, it doesn't do carriage returns & line feeds or account for them properly.

For example, if I enter the following text on one line:

1111122222333334444455555

it uses all 25 characters.

However, if I enter text on each line & hit enter, this is what I am able to enter:

11111
22222
33333
4444

Which is only 22 characters. I know that it is detecting a carriage return, because when I put in: 11111

a character counter shows 5. When I hit the enter key, the counter goes to 6, if I enter 22222 the counter is now 11.

The code I'm using to count the characters is:

$("#myTextArea").keyup(function() {
        var j = $(this).val().length;
        var i = 25 - j;
        $("#charsUsed").text( j );
        $("#charsLeft").text( i );
        });

I thought the issue might be some code I put in to resize the TextArea automatically, but it isn't. I'm sure I am just missing something on the code & would appreciate input on what I'm doing wrong & haven't seem to have figured out yet.

Answer 1

I stumbled upon the answer myself. It turns out the character counter I was using was not accurately counting the line breaks in the <textarea>.

Although I was using IE8, I found the answer in a question about Chrome counting characters wrong in textarea with maxLength attribute. That question is here.

The code I used before:

$("#myTextArea").keyup(function() {
        var j = $(this).val().length;
        var i = 25 - j;
        $("#charsUsed").text( j );
        $("#charsLeft").text( i );
        });

has been modified to:

$("#myTextArea").keyup(function() {
    var x = $("#myTextArea").val();
    var newLines = x.match(/(\r\n|\n|\r)/g);
    var addition = 0;
    if (newLines != null) {
       addition = newLines.length;
       }
    var j = x.length + addition;
    var i = 25 - j;
    $("#charsUsed").text( j );
    $("#charsLeft").text( i );
    });

The embedded new lines must be transmitted as a CR LF pair - actually 2 characters. Thanks to the posters in the other thread for their help.