Search code examples
javascriptjquerygoogle-chrometextareamaxlength

Textarea | val().length not counting "Enter/Line Breaks" in chrome


I have a textarea with the attribute maxlength set to 350 & it works fine, it also counts enter/line break as a character.

I also have to show a error message if user try to type more than or reaches to 350 character limit for which I am using this code:

$("textarea").keyup(function (e) {
    if($(this).val().length >=350){
        $('.error').show();
    }else{
        $('.error').hide();
    }
});

It works but in chrome it doesn't count enter/line break but maxlength does as a result if a user is breaking text in multiple lines, he do stops typing after 350 character but don't see any message.

Here is a fiddle to play with: https://jsfiddle.net/udp9oxx4/

Note this bug only occurs in chrome.


Solution

  • $("textarea").keyup(function (e) {
    
    var isChrome = window.chrome;
    if(isChrome){
    var value = $(this).val().replace(/(\r\n|\n|\r)/g,"  ");
    }
    else{
    var value = $(this).val();
    }
    
            if(value.length >=350){
                $('.error').show();
            }else{
                $('.error').hide();
            }
        });
    

    Chrome counts line break as 2 character, so it counts the characters wrong. Just add this code in front of the function and it will work just fine.

    https://jsfiddle.net/3wpqd4nr/

    Fiddle