Inserting at the cursor using JavaScript : alexking.org

NOTE: I’ve released a set of JavaScript Quicktags (that implement this technique) under the LGPL license. Please look at this code as it has a variety of enhancements and bug fixes.

I discovered a real JavaScript gem in PHPMyAdmin this morning. They have code that inserts content into a <textarea> at the cursor position instead of just at the beginning/end of the content. This is something I thought wasn’t possible – I’m quite pleased I was wrong.

I’ll be glad to see this code spread quickly to web forms that use buttons to aid in styling text and inserting image and link tags. WordPress and other blog and web forum packages would really benefit from this. (PHPMyAdmin is GPL, so any other GPL app should be able to use their code directly with attribution).

Here is a quick look at a generic version of the technique:

function insertAtCursor(myField, myValue) {

  //IE support

  if (document.selection) {

    myField.focus();

    sel = document.selection.createRange();

    sel.text = myValue;

  }

  //MOZILLA/NETSCAPE support

  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;

  }

}

// calling the function

insertAtCursor(document.formName.fieldName, 'this value');

I guess when the mouse leaves the textarea, it still has a cursor position left over. This code uses that position just as you’d want it to.