javascript - 在 aloha 编辑器中计算 textarea 的字符数

Question

我的html代码是这样的：

<div class="control-group">
  <label class="control-label">Message Body
    <p class="showlimit"><!-- this shows character limit for the message -->
         <span id="charsLeft"></span>/<span id="charsLimit"></span>
    </p>
  </label>
  <div class="controls">
    <textarea rows="7" id="msg" name="msg" class="field span5"></textarea>
  </div>
</div>

我的jQuery代码是这样的：

$('#charsLimit').text(1200);
$('#msg').limit($('#charsLimit').text(),'#charsLeft');

我想显示 id charsLeft 中剩余 1200 个字符的数量（即 charsLimit 的值） 在正常情况下它可以工作，但是在使用Aloha 编辑器的丰富编辑级别上它不起作用，因为它用div替换 textarea如下所示：

<!-- rest of the above code is same -->
<div class="controls">
  <textarea id="msg" class="field span5" name="msg" rows="7" 
      style="display: none;"><!-- observe the style displaying none -->
  </textarea>
  <!-- 
     msg replaced with msg-aloha hence not able to perform normal jquery on msg 
  -->
  <div id="msg-aloha" class="aloha-textarea aloha-editable 
        aloha-block-blocklevel-sortable ui-sortable" 
        contenteditable="true" style="height: 140px; width: 456px;">
      <br class="aloha-cleanme" style="">
  </div>
</div>

我无法理解该怎么做......

Answer 1

查看限制 ContentEditable div 中的字符数

尝试

$('#charsLimit').text(1200);
$('#msg-aloha').keyup(function(e){ $('#charsLeft').text($('#charsLimit').text() -check_charcount(e)); });
function check_charcount(e)
{   
    var char_count = $('#msg-aloha').text().length;
    if(e.which != 8 && char_count >= $('#charsLimit').text())
    {
        e.preventDefault();
    }
    return char_count;
}