title: How do you avoid losing focus on a contenteditable element when a user clicks outside that element?
body: <p>I want to prevent a <code>contentEditable</code> area from losing focus if a click is made outside that area.  Some sample HTML looks like this:</p>
  <pre><code>&lt;div id=&quot;content&quot;&gt;
      &lt;p&gt;Hello&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id=&quot;clickThis&quot;&gt;
      &lt;p&gt;If you click on this or anywhere for that matter after focusing on Hello, you lose your focus on Hello&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Sample Javascript looks as follows:</p>
  <pre><code>$(document).ready(function()
  {
      $('#content')[0].contentEditable=true;
  
      $('#clickThis').bind('click',function(e)
      {
          console.log(window.getSelection().getRangeAt(0).startContainer);
          e.preventDefault();
      });
  });
  </code></pre>
  <p>When you click on the <code>#clickThis</code> div or anywhere outside the <code>#content</code> div, you lose focus on the <code>#content</code> div even if you call the click event's <code>preventDefault</code> function.</p>
  <p>In addition, the range changes the moment the click event is fired, so I can't just return to the previous range after the click has occurred.  Is there a way to maintain the cursor position and focus after a click occurs?</p>
  <p>jsFiddle: <a href="http://jsfiddle.net/VivekVish/FKDhe/4/" rel="nofollow noreferrer">http://jsfiddle.net/VivekVish/FKDhe/4/</a></p>