Счетчик символов JQuery с разрывами строк в contenteditable DIV

Question

У меня есть следующий код jQuery:

$(document).on("input", "#textbox", function(event){
    var characters = $(this).text().length;
    $(".character-counter").html(160 - characters);
});

И следующая структура HTML:

<div id="textbox" contenteditable="true"></div>
<div class="character-counter">160</div>

Я хочу, чтобы счетчик символов подсчитывал разрывы новой строки как 1 символ,Например:

Line 1
Line 2

Line 4

Счетчик показывает 142, и я хочу, чтобы он показывал 139 (считая разрывы строк).

Answer 1

Вы должны считать строку отдельно

$(document).on("input", "#textbox", function(event){
    var characters = $(this).text().length;
    if (characters) characters += $(this).find(">").length;

   $(".character-counter").html(160 - characters);
});

https://codepen.io/spmsupun/pen/PaavNo

в contenteditable новая строка означает новый элемент, поэтому он не считает строки.