JQuery'；。长度'；属性在检查div中的字符长度时返回错误的值

我有一个

div

和

contenteditable

属性，使

div

的行为类似于textarea

<div class="caption" contenteditable>

</div>

<p id="characters-count">0 characters</p>

当我输入一个字符时，它返回'11'，但当没有字符时，它在Firefox中返回'10'。在Chrome中，它是相同的，但在我第二次按下键盘后，它终于正确了

看看这个

更新：我正在使用Firefox 29和Chrome 34

---

演示

-->

正在计算空格

var char_count = $(this).text().trim().length;

---

执行此操作

与文本区域一样，您的div需要在开始标记和结束标记之间没有新行或空格

这：

<div class="caption" contenteditable>

</div>

需要这样做：

<div class="caption" contenteditable></div>

固定小提琴：

你的div不是空的（10个字符），因为你留下了空格（和空格计数）

0个字符**

请参阅此JSFIDLE：

---

但回报率不会像这样被考虑。为什么有人投票否决了这个@RajaprabhuAravindasamy：不知道为什么会被否决，但这将从div中删除用户手动插入的空格。只有当空格出现在句子之前或之后时。我也不知道为什么它会被否决，因为它确实做了$.trim（）所做的事情。我认为这是最好的解决方案，因为trim（）可能会切断回报，实际上是有意的space@Alex是的，这就是为什么我决定不给出

trim（）

答案；）使用修剪是最好的解决方案。它不会修剪回车，它只从开始和结束修剪空格。因此，如果用户在空格中键入单词回车符，则返回单词空格。只有“空格”将被删除修剪键入“一”，然后按回车键，按空格键，然后按回车键，然后键入另一个字，然后按回车键。您将看到，字符的计数始终只计算实际字符，并且不会丢弃键入的回车符或空格，除非您想要包含空格和回车符的任何键入字符的完整列表？

$('.caption').keyup(function(){
   var char_count = $.trim($(this).text()).length;
   $('#characters-count').html(char_count + " characters");   
});

<div class="caption" contenteditable>

</div>

<div class="caption" contenteditable></div>

<div class="caption" contenteditable></div>
<p id="characters-count">0 characters</p>**