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.