title: Cursor moves to beginning of text when I update text with javascript
body: <p>I'm using contenteditable to allow users to edit information on the webpage, but some fields have a length requirement, and I want them to know when they've hit that requirement, so I change the color of the text that will be chopped off when they hit return to red. </p>
  
  <p>The issue is that when the text is changed with JavaScript, the browser moves the cursor to the front of the string. Does anyone know of a way I can prevent this behavior? As far as I can tell this this is an issue in all browsers.</p>
  
  <p><a href="http://jsfiddle.net/TeXG6/" rel="nofollow">Here's a JSFiddle.</a> </p>
  
  <pre><code>$(element).keypress(function (event) {
      if ($(element).text().trim().length &gt; maxChars) {
          $(element).html($(element).text().trim().substr(0, maxChars) +
              "&lt;span class=red&gt;" + $(element).text().trim().substr(maxChars) + "&lt;/span&gt;");
      }
  });
  </code></pre>