Insert value into TEXTAREA where cursor was

Question

I have a textarea and a div with values. When I click on a value I insert it into textarea. I need it to be inserted where my cursor was in textarea. Why do I say WAS? Because when I move it out and click on a value to insert, I assume it looses focus in the text area.

So, my question is, is there a way to "remember" the latest cursor position within textarea and then insert my values at that position?

Perhaps it could be a char number in a string?.. Currently I add it like this:

input.val( function( i, val ) { return val + " " + myInsert + " "; } );

Also I use jQuery, perhaps I could use it?

Answer 1

I've written a cross-browser jQuery plug-in for dealing with the caret/selection in textareas and text inputs called Rangy inputs (terrible name, I really should think of a better one). A combination of methods from this and the techniques in Edgar Villegas Alvarado's answer should do the trick, although in IE, the focusout event fires too late and you'll need to use the proprietary beforedeactivate event instead:

var $textBox = $("#foo");

function saveSelection(){
    $textBox.data("lastSelection", $textBox.getSelection());
}

$textBox.focusout(saveSelection);

$textBox.bind("beforedeactivate", function() {
    saveSelection();
    $textBox.unbind("focusout");
});

When inserting text later, the following will insert text at the previous cursor position (or overwrite the previously selected text, if the user had selected any):

var selection = $textBox.data("lastSelection");
$textBox.focus();
$textBox.setSelection(selection.start, selection.end);
$textBox.replaceSelectedText("Some new text");

See jsFiddle example here: http://jsfiddle.net/rQXrJ/1/

Answer 2

Here is a working example of what you are trying to do check it out at: http://jsfiddle.net/J5Z2n/1/

Hello there my good friend....
how do you do

the jQuery:

function insertAt (myField, myValue, startSel, endSel) {
    if (startSel || startSel == '0') {
        var startPos = startSel;

        var endPos = endSel;

        myField.val(myField.val().substring(0, startPos)+ myValue+ myField.val().substring(endPos, myField.val().length));

  } 
  else {

      myField.val() += myValue;

  }
}

// calling the function
var targetBox = $('textarea#insert'),
    startSel, 
    endSel;
targetBox.bind('focusout', function() {
    //insertAtCursor(this, 'how do you do');
    startSel = this.selectionStart;
    endSel = this.selectionEnd;
});

    $("#myvalue").click(function() {
        var myValue = $(this).text();
        insertAt(targetBox, myValue, startSel, endSel);

    });    

The original function was borrowed from this post http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript

That should give you a solid head start I hope. Cheers