在检查div中的字符长度时，JQuery'。length'属性返回不正确的值

Question

我有div contenteditable属性，使div的行为与textarea相似。

<div class="caption" contenteditable>

</div>

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

现在，我想使用JQuery .length属性

检查div中的字符数

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

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

看看这个jsFiddle

更新：我使用的是Firefox 29和Chrome 34

Answer 1

就像textareas一样，你的div需要在开始和结束标记之间没有新的行或空格。

这个：

<div class="caption" contenteditable>

</div>

需要这样：

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

固定小提琴：http://jsfiddle.net/k5B32/9/

Answer 2

使用$.trim()

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

演示---> http://jsfiddle.net/k5B32/8/

Answer 3

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

这样做

Answer 4

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

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

看到这个JSFiddle：

JSFiddle

Answer 5

计算空间

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