Jquery word counts when user type line break

Question

I have a word counts create in jquery.

However if user press 'Enter'(line break), it will cause 1 character left.

ex.maxlength=10, if user type abcde, \n, abc

total become 9 characters only and the div show 1 character left

$(document).ready(function(){   
    //Word Count
        $('.word_count')
        .on('input keyup keydown focus', function () {
            var maxlength = $(this).attr('maxlength');
            var value = $(this).val();

            if(value.length > 0) {
                $(this).nextAll('div').first().text((maxlength - $(this).val().length));
            } else {
                $(this).nextAll('div').first().text(maxlength);
            }   
        }); 
});

i just find out Chrome count characters wrong in textarea

Chrome counts characters wrong in textarea with maxlength attribute

What is precisely the expected behavior? – Jérôme Jun 18 '13 at 11:02 — Jérôme, Jun 18 '13 at 11:02
Side note, you might also want to catch 'paste'. – Chris S. Jun 18 '13 at 11:17 — Chris S., Jun 18 '13 at 11:17

Adil Shaikh · Answer 1 · 2013-06-18T11:02:52.810

1

You can find the exact character length like this (excluding any space and line breaks)

var length = $.trim($(this).val()).split(" ").join("").split('\n').join('').length;

Demo -----> http://jsfiddle.net/DqYsN/1/

edited Jun 18 '13 at 11:02

answered Jun 18 '13 at 10:56

Adil Shaikh

44,509
17
89
111

Why again we used join here? – PSR Jun 18 '13 at 10:58
@PSR, To remove `space` between words – Adil Shaikh Jun 18 '13 at 10:59
maxlength="10" will still count if u press any key, so if max - lenght, it will still have problem. because Im using count down – user2178521 Jun 18 '13 at 11:08
You should not return false when backspace was hit tbh – Chris S. Jun 18 '13 at 11:19
I just find out maxlength, \n occupied 2 characters length – user2178521 Jun 18 '13 at 11:21
@ChrisS. , Yes ! i didn't noticed that. – Adil Shaikh Jun 18 '13 at 11:21

score 1 · Accepted Answer · answered Jun 18 '13 at 11:57

Chrome count line break as 2 characters, put this one inside of your code should be fine.

var isChrome = window.chrome;
if(isChrome){var value = $(this).val().replace(/(\r\n|\n|\r)/g,"  ");}
else{ var value = $(this).val();}

" " this make length 2 characters, so it will match with textarea length in chrome

score 0 · Answer 3 · answered Jun 18 '13 at 11:00

0

You can replace the whitespaces before counting with something like: .replace(/\s/,'')

So instead of:

$(this).val().length)

You do:

$(this).val().replace(/\s/,'').length)

answered Jun 18 '13 at 11:00

Francisco Paulo

6,284
26
25

Jquery word counts when user type line break

3 Answers3

Linked