contenteditable DIV中带换行符的JQuery字符计数器

我有以下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>

---

计数器显示

142

，我希望它显示

139

（计算换行）。

您必须单独计算换行

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

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

---

在

contenteditable

中，新行表示新元素，这就是它不计算行数的原因。

您能解释更多吗？@SupunPraneeth我需要将换行数计算为字符。您是指

文本框中的字符吗？@SupunPraneeth是，文本写在
#textbox
中，字符总数显示在
中。字符计数器
，但换行符不计算。这是什么：
打开（“输入”）
？为什么我在没有写任何东西的情况下添加新行时，它会算作
2个
字符？因为它会计算行数，无论它是否有字符？我明白你的意思是它可以计算两行吗？我会精确地检查，如果你在开头插入一个换行符，它会算作2个字符，而它应该只有1个。因为当你ress enter不输入任何内容，它会创建两行。我认为最好的做法是，如果没有任何字符，就不要计算
$(document).on("input", "#textbox", function(event){
    var characters = $(this).text().length;
    if (characters) characters += $(this).find(">").length;

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