在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');

like this: 我想显示id charsLeft中剩余的字符数（即1200个字符）（即charsLimit的值），在正常情况下可以正常工作，但是在使用Aloha编辑器进行的丰富编辑级别上，它不能正常工作，因为它将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;
}