count characters of textarea in aloha editor

Question

my html code is like this:

<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>

and my jquery code is like this:

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

I wanted to show number of character left in id charsLeft out of 1200 (i.e. value of charsLimit) In normal basis it work, but on rich editing level using Aloha editor it is not working as it replaces textarea with div like this:

<!-- 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>

I am not able to understand what to do...

Answer 1

look at Limiting Number of Characters in a ContentEditable div

try

$('#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;
}