title: how to use jquery to insert a character at specified position into monospaced textarea
body: <p>I have a monospaced textarea (not unlike the stackexchange editor). When my user clicks, I need a character to automagically appear on the previous line using jQuery. I know I need to use <code>.click()</code> to bind a function to that event, but the logic of the function eludes me. </p>
  
  <p><strong>Desired Behavior</strong>...user will click at position of the asterisk *</p>
  
  <pre><code>Here is some text in my editor.
  When I double click at a position*
  I want to insert a new line above, with a new character at the same position
  </code></pre>
  
  <p>The above text should become the following after the function gets run</p>
  
  <pre><code>Here is some text in my editor.
                                   *
  When I double click at a position*
  I want to insert a new blank line above, at the same position
  </code></pre>
  
  <p><strong>What I have tried:</strong></p>
  
  <p>I have found the <a href="http://plugins.jquery.com/caret/" rel="nofollow">caret jQuery plugin</a>, which has a function called <code>caret()</code> that I can get to find the position of the the asterisk when I click (the position is 74). </p>
  
  <pre><code>&lt;script src='jquery.caret.js'&gt;&lt;/script&gt;
  
      $('textarea').click(function(e) {
        if (e.altKey){
          alert($("textarea").caret());
        }
      });
  </code></pre>
  
  <p>But I really need to know the position of the character within the line, not the entire textarea. So far this eludes me.</p>