JQuery 包含换行符的字符计数器 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中，新行表示新元素，这就是它不计算行数的原因。

JQuery 包含换行符的字符计数器 DIV

JQuery character counter with line breaks in a contenteditable DIV

jquery

contenteditable