Chrome Counts Characters Wrong in Textarea With Maxlength Attribute

Chrome counts characters wrong in textarea with maxlength attribute

Your carriage returns are considered 2 characters each when it comes to maxlength.

1\r\n
1\r\n
1\r\n
1

But it seems that the javascript only could one of the \r\n (I am not sure which one) which only adds up to 7.

Return key in textarea counts as 2 characters for chrome

The carriage returns in Chrome are \r\n, which are considered two characters (\r and \n).

I would recommend you to take a look in the following questions:

• Chrome counts characters wrong in textarea with maxlength attribute
• Get the character count of a textarea including newlines
• Why does Javascript only count carriage returns as one character when it is two?

The last link can provide an explanation as why limiting the length by HTML attributes make the new line count as two characters (which is the real length) while JavaScript code considers them to be a single character.

If you really need to worry about line breaks and character counting, I would suggest you to replace the length validation in HTML by a JavaScript validation in your AngularJS application, as you would be able to count line breaks as a single character, as desired.

Different maxlength validation of textarea with newlines in Chrome and Firefox

I didnt find any solution to make the maxlength atribute to work the same way in all browsers, and I think is because its relative new. So I decided to go for javascript.

Googling a little I found this jQuery Max Length plugin that works great just adding a few lines. Is available under the MIT licence. And counts newlines as it should be (2 characters)

It has some parameters to set the maxlength, feedback text, background change when full, between others. The website has very good documentation and a lot of examples.

It's highly customisable‎, for example here is mine

This is the only code I used plus some css.

<script type="text/javascript" src="jquery.plugin.js"></script>
<script type="text/javascript" src="jquery.maxlength.js"></script>
<script>
    $(function() {
        $('.t_tresc').maxlength({
            showFeedback: true,
            feedbackText: '{c} / {m} max.', 
            overflowText: '{c} / {m} max!', 
            feedbackTarget: '#targetFeedback$name',
            max: $max_length,
            truncate: false,
            onFull: null
        }); 
    });
</script>

textarea maxlength attribute not counting special characters immediately

You have to use ng-trim="false" in order to count line breaks, spaces and special characters. Try like that:

<textarea ng-model="someText" placeholder="Type..." maxlength="10" ng-trim="false">
</textarea>
  <span class="counter">{{10 - someText.length}} still remaining!</span>

• Ng-Input Documentation
• Ng-Input Directive Documentation
• Working JsFiddle

I hope I've been helpful.

Javascript length and textarea maxlength don't match up

You are likely firing so many "keyup" events that when you type fast or enter multiple characters at a time the events are not necessarily finishing the the order they were fired, and you end up with a sum that is a couple characters old.

You might want to try a small timeout, and cancel the timeout each time you start a new one. Something like:

var timeoutVariable;
var inputArea = $('textarea');
inputArea.keyup(function(){
   window.clearTimeout(timeoutVariable);
   timeoutVariable = setTimeout(runSum(),100);
});

function runSum() {
   var sum = 100 - inputArea.val().length;
   console.log(sum);
}

http://jsfiddle.net/RnTHJ/8/

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

$("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

---

Related Topics