title: Set textarea's caret position using x and y position
body: <p>I want to implement inline edition, so if user clicks on a div with some text, the textarea will appear at the same position as clicked div's position and will get the text from the div. This is fine for me, but what I want to do next is to set textarea's caret position according to x and y position from div click event. Any ideas?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="content" style="display: block; z-index: 10"&gt;Some text&lt;/div&gt;
  
  &lt;textarea id="editor" style="position: absolute; display: none; z-index: 11"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('#content').click(function(e) {
      var content = $(this);
      var editor = $('#editor');
  
      var position = content.offset();
  
      editor.css('left', position.left);
      editor.css('top', position.top);
      editor.val(content.text());
      editor.show();
  
      var mousePosition = { x: e.offsetX, y: e.offsetY };
  
      // here I want to set the #editor caret position at the same place,
      // where user clicks the #content (mousePosition variable)
  });
  </code></pre>