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.

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.

• javascript
• cross-browser
• textarea
• text-cursor

Share Improve this question Follow edited Dec 28, 2021 at 17:09 General Grievance 4,9883838 gold badges3737 silver badges5555 bronze badges asked Jul 22, 2010 at 11:26 richw81richw81 6111 gold badge11 silver badge22 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 21

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();
    }
}

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!