How to insert text into the textarea at the current cursor position?

Use selectionStart/selectionEnd properties of the input element (works for <textarea> as well)

function insertAtCursor(myField, myValue) {    //IE support    if (document.selection) {        myField.focus();        sel = document.selection.createRange();        sel.text = myValue;    }    //MOZILLA and others    else if (myField.selectionStart || myField.selectionStart == '0') {        var startPos = myField.selectionStart;        var endPos = myField.selectionEnd;        myField.value = myField.value.substring(0, startPos)            + myValue            + myField.value.substring(endPos, myField.value.length);    } else {        myField.value += myValue;    }}

This snippet could help you with it in a few lines of jQuery 1.9+: http://jsfiddle.net/4MBUG/2/

$('input[type=button]').on('click', function() {    var cursorPos = $('#text').prop('selectionStart');    var v = $('#text').val();    var textBefore = v.substring(0,  cursorPos);    var textAfter  = v.substring(cursorPos, v.length);    $('#text').val(textBefore + $(this).val() + textAfter);});

For the sake of proper Javascript

HTMLTextAreaElement.prototype.insertAtCaret = function (text) {  text = text || '';  if (document.selection) {    // IE    this.focus();    var sel = document.selection.createRange();    sel.text = text;  } else if (this.selectionStart || this.selectionStart === 0) {    // Others    var startPos = this.selectionStart;    var endPos = this.selectionEnd;    this.value = this.value.substring(0, startPos) +      text +      this.value.substring(endPos, this.value.length);    this.selectionStart = startPos + text.length;    this.selectionEnd = startPos + text.length;  } else {    this.value += text;  }};