Insert value into TEXTAREA where cursor was

I have a textarea and a div with values. When 开发者_Go百科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?

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/

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

If the caret (the cursor) is somewhere in the text field, it registers in Javascript as an empty selection. That is, the selectionStart and selectionEnd attributes are the same. You can use those attributes to detect the position of the caret.

Apparently selectionStart and selectionEnd are quite useful here. Check this out: http://www.scottklarr.com/topic/425/how-to-insert-text-into-a-textarea-where-the-cursor-is/

You can use the jQuery Caret plugin to get/set the cursor position .
Example usage:

var cursorPosition = $("#textbox").caret().start);

You could 'store' this position like this:

$("#textbox").focusout(function(){
   var cursorPosition = $(this).caret().start);
   $(this).data("lastCursorPos", cursorPosition);
});

To retrieve it (on your div click event), do this:

var lastCursorPosition = $("#textbox").data("lastCursorPos");

Hope this helps. Cheers