Why doesn't textarea.selectionStart work on IE?

Question

This has gotten to the point of absolute frustration. We are trying to write some js that will insert text at a specific location in the text associated with a textarea. It seems like it should be simple but so far we haven't figured it out.

What complicates our process is that we have a floating menu from which you make selections about what you want to insert. So the sequence is:

• position to the desired insert location in the textarea. Using a debugger breakpoint, Visual Studio debugger indicates that the textarea object has selectionStart and selectionEnd defined as numbers with the correct values. If at that break, you try and write js that accesses selectionStart and selectionEnd you get undefined (which doesn't make sense but there are a lot of postings here that say everyone else has the same issue)

• now we position to the floating menu which is nothing more than a div wrapper on a table where the td elements call a function to insert text). If we click exactly on the td element, the text will get inserted where it belongs. If at anytime we click outside the td element but inside the menu, document selection gets reset to the beginning of the text area and we insert at the wrong location.

• we have tried trapping the onclick event chain associated with the menu and there is nothing obvious going on that would cause document selection to change but it does nonetheless.

• we have tried a variety of workarounds where we put an onClick on the textarea itself and remember the current range for the textarea but that always ends up at the front of the buffer.

So in simple terms: why doesn't createTextRange and document selection behave in a rational manner on IE and what is the workaround?

What does jQuery do that works around this issue since the most common answer to the postings about this seems to be use jQuery?

Answer 1

Here's a method that will insert at caret.

function insertAtCaret ( areaId, text ) {
    var txtarea = document.getElementById(areaId),
        scrollPos = txtarea.scrollTop,
        strPos = 0,
        range, front, back,
        br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
        "ff" : (document.selection ? "ie" : false ) );
    if (br == "ie") { 
        txtarea.focus();
        range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        strPos = range.text.length;
    }
    else if (br == "ff") strPos = txtarea.selectionStart;

    front = (txtarea.value).substring(0,strPos);  
    back = (txtarea.value).substring(strPos,txtarea.value.length); 
    txtarea.value=front+text+back;
    strPos = strPos + text.length;
    if (br == "ie") { 
        txtarea.focus();
        range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        range.moveStart ('character', strPos);
        range.moveEnd ('character', 0);
        range.select();
    }
    else if (br == "ff") {
        txtarea.selectionStart = strPos;
        txtarea.selectionEnd = strPos;
        txtarea.focus();
    }
    txtarea.scrollTop = scrollPos;
};

I originally got it from an answer here on SO.