Inserting text at cursor in a textarea, with Javascript

Question

I've had a look round the web for solutions, and there are some, but they all seem to split code into supporting IE and Firefox. I was wondering if there's a more elegant way which would work on every browser, to insert some text at the cursor in a textarea.

Thanks very much,

Rich

Answer 1

No, there isn't. IE has its TextRange objects to do the job. IE >= 9 and everything else for the last long time has selectionStart and selectionEnd properties on textareas and text inputs. This particular task isn't too bad: the following will delete the current selection (if one exists), insert text at the caret and reposition the caret immediately after the inserted text, in all the major browsers:

function insertTextAtCursor(el, text) {
    var val = el.value, endIndex, range;
    if (typeof el.selectionStart != "undefined" && typeof el.selectionEnd != "undefined") {
        endIndex = el.selectionEnd;
        el.value = val.slice(0, el.selectionStart) + text + val.slice(endIndex);
        el.selectionStart = el.selectionEnd = endIndex + text.length;
    } else if (typeof document.selection != "undefined" && typeof document.selection.createRange != "undefined") {
        el.focus();
        range = document.selection.createRange();
        range.collapse(false);
        range.text = text;
        range.select();
    }
}

Answer 2

implement both: the code that is supporting FF and the Code supporing the IE. You can use Frameworks to write Code for both browsers. Than the Framework will do the work of splitting the differences between the browsers.

It's sad, but browsers aren't 100% compatible!