twoCharLinebreak doesn't work in Firefox

[JamesChe91]

How I can fix this?

[JamesChe91]

Look a screenshot
https://k60.kn3.net/2/3/F/C/8/B/0A1.png
The number of characters entered exceeds the limit when there are line breaks.

[reypm]

yes, confirmed, I am running the same issue: Chrome 48.0.2564.97 m, jQuery 2.2.0, Bootstrap 3.3.6 and latest Bootstrap Maxlength release from master branch. This is my setup:

$('#message').maxlength({
    alwaysShow: true,
    threshold: 10,
    warningClass: "label label-info",
    limitReachedClass: "label label-danger",
    placement: 'top',
    utf8: true
});

Any advice @mimo84?

Also I am using this for check how many characters a message has since this will be send through SMS and the limit is 160 for new phones and 140 for a few old phones (don't ask me why) so is there any chance to alert user when I reach 140 characters?

[mimo84]

I didn't have time to debug this bug unfortunately.. I'll try to look into it as soon as I have time. In the meanwhile do you have any ideas why this should have stopped working?

[reypm]

@mimo84 well I think you miss a case when we mix special characters like in spanish languages ex: áéíóúñ or any other with line breaks. For example I am testing with this text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ipsum odio. Ut vel semper odio. Morbi eu urna ullamcorper, facilisis leo id

áéíóú ñ
Lore

And it allows 166 over 160. Here is a fiddle with the tests. Hope you have a time for look on this soon since I check the source but didn't found really where it fails

[ashleyglee]

This is a browser issue on how different browsers count newlines. Chrome counts them as 2 characters, while IE/Firefox count them as 1 character.

The 2 char line break is working as it's counting them as 2 characters and is set to "true" by default: "twoCharLinebreak: true". What you are seeing as not working is the difference in how this plugin counts new lines vs how the browser counts them. The "validate" option by default is set to false, which falls back to the browser to limit the characters, which is going to allow you to go over what the counter says.

To solve your issue, you need to set the "validate" option to true, which will force this library to limit the number of characters in your field:

$('#message').maxlength({
    validate: true,  // set this for this library to enforce maxlength
    alwaysShow: true,
    threshold: 10,
    warningClass: "label label-info",
    limitReachedClass: "label label-danger",
    placement: 'bottom',
    utf8: true
});