title: contenteditable="true" div character limit
body: <p>Hi I am trying to limit text in contenteditable="true" div:</p>
  
  <pre><code>var char = 500;
  $("#counter").append("You have &lt;strong&gt;" + char + "&lt;/strong&gt; chars left.");
  $("#editor").keypress(function () {
      if ($(this).text().length &gt; char) {
          $(this).text($(this).text().substr(1));
      }
      var rest = char - $(this).text().length;
      $("#counter").html("You have &lt;strong&gt;" + rest + "&lt;/strong&gt; chars left.");
      if (rest &lt;= 100) {
          $("#counter").css("color", "#ff7777");
      }
      else {
          $("#counter").css("color", "#111111");
      }
  });
  </code></pre>
  
  <p>unfortunately I am facing following problems:</p>
  
  <ol>
  <li>When div contain any text by default, the number of chars left is not being updated until any insertion or deletion.</li>
  <li>If the user exceeds the maximum number of chars, the carriage goes to the beginning of the text box and deletes the first char instead of the recently inserted one.</li>
  <li>If user pastes a text longer than 200 chars, it won't be shortened.</li>
  </ol>
  
  <p>Please find the code:
  <a href="http://jsfiddle.net/mmacin/A69tk/1/">http://jsfiddle.net/mmacin/A69tk/1/</a></p>