Issue with IE when Inserting text into text area at cursor position

Question

I am having a scenario where I need to put cursor on text area and then click on tree view node on the same page to have selected node's text into my textarea where I placed cursor just before clicking on tree node.

I got many answers on Stack overflow including below,

Inserting text in textarea at cursor position if cursor placed else text should append at last in IE

Inserting text after cursor position in text areа

Insert text into textarea with jQuery

How to insert text at the current caret position in a textarea

Inserting text at cursor in a textarea, with Javascript

How do I insert some text where the cursor is?

FF and Chrome works fine with above solutions but IE 8 or lower version fails (didn’t check with IE9) if focus is moved to some other control.

There is below or similar implementation for IE in almost all posts:

(function ($) {
    $.fn.getCursorPosition = function () {
        var el = $(this).get(0);
        var pos = 0;
        if ('selectionStart' in el) {
            pos = el.selectionStart;
        } else if ('selection' in document) {
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength
        }
        return pos;
    }
})(jQuery);

Note : We also can use if(el.selectionStart || el.selectionStart == '0') instead of if ('selectionStart' in el) and if(document.selection) instead of if ('selection' in document)

But this will fail when focus is moved to some other control first and then executing it. In my case focus will be moved to tree nodes when user will traverse through nodes.

Is there any solution for this scenario?

I am thinking to write onkeyup and onclick on text area and save its cursor position into hidden field so when focus is moved to some other control, i will have hidden field to get cursor position of text area. I will post that here later, meanwhile if anyone has some good idea then please share.

Thank you in advance

score 2 · Accepted Answer · answered Nov 07 '12 at 13:39

As i mentioned above i have below code to make it working in IE as well, (Also thought about having only onblur instead of these 2 events but it didn’t work as focus already lost when execution comes into my code to set hidden variable)

Below implementation It is working fine in my case.

if ($("#myTextArea").get(0).selectionStart == undefined) {
    $("#myTextArea").click(function (e) {
        $("#hdnTextAreaPosition").val($("#myTextArea").getCursorPosition());
    });
    $("#myTextArea").keyup(function (e) {
        $("#hdnTextAreaPosition").val($("#myTextArea").getCursorPosition());
    });
}

Above events (keyup and click) are in global script and will be attached only in case of selectStart is undefined

function getTextAreaCursorPosition() {
    if ($("#myTextArea").get(0).selectionStart == undefined) {
        return $("#hdnTextAreaPosition").val();
    }
    else {
        return $("#myTextArea").getCursorPosition();
    }
}


function insertToMyTextArea(textToInsert) {
    $("#myTextArea").focus();
    var cursorPosition = getTextAreaCursorPosition();
    var myContent = $("#myTextArea").val();
    $("#myTextArea").val(myContent.substring(0, cursorPosition) + textToInsert + myContent.substring(cursorPosition));
}

insertToMyTextArea is the main function i am calling on click of tree node.

Please share your views if any alternative solution is available instead of having events.

I used `.on('focusout',...) ` (or .focusout(), which is the same) to save the selection positions, which is called before the focus is lost. Also the event bubbles, so you can catch it in parent elements as well (blur doesn't bubble). — w.stoettinger, Oct 23 '17 at 06:11

score 1 · Answer 2 · edited May 23 '17 at 10:26

1

I would suggest using my jQuery plug-in for this in conjunction with some extra stuff to save the textarea's selection or cursor position before the focus is lost.

I've covered this exact case in a previous answer:

https://stackoverflow.com/a/5890708/96100

edited May 23 '17 at 10:26

Community

1
1

answered Nov 07 '12 at 14:50

Tim Down

318,141
75
454
536

Issue with IE when Inserting text into text area at cursor position

2 Answers2