title: Clicking outside of textarea loses caret position
body: <p>I created a textarea and a button. When the button is clicked, I want to add the letter 'a' at the current position of the cursor in the textarea. Below is my current code:</p>
  
  <pre><code>$('button.buttonA').click(function(){
      var cursorPos = $('textarea.formInsideMenu').prop('selectionStart');
      var textCurrent = $('textarea.formInsideMenu').val();
      var textBefore = textCurrent.substring(0, cursorPos);
      var textAfter = textCurrent.substring(cursorPos, textCurrent.length);
  
      $('textarea.formInsideMenu').val(textBefore + 'a' + textAfter);
  
  });
  </code></pre>
  
  <p>The above code works fine, (inserts an 'a' at the correct position), when the focus is on the textarea; but as soon as I click on the button, I lose focus of the textarea and the cursor is no longer showing. If I click on the button again after this, 'a' is appended at the very end of the text, (it seems like the cursor is moved to the end of the text). Is there anyway to keep track of where the cursor is inside the textarea even when something else has been clicked on and the textarea has lost focus?</p>