可编辑的DIV中带有换行符的jQuery字符计数器

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中的新行表示新元素，这就是为什么它不计算行的原因。