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

我想显示1200个id charsLeft中剩余的字符数（即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

查看Limiting Number of Characters in a 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;
}

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

1 个答案: