Placing a cursor after text insertion into textarea

Question

I know there are smiliar questions but I didn't get my answer.

function setTextareaSelection(newText) {
    var selText;
    newText = "This is a text \n to insert";
    var textarea = document.getElementById('textarea');
    if (window.getSelection) {
        var selText = "";
        selText = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
        var selEnd = textarea.selectionEnd;

        var selTextBefore = textarea.value.substring(0, textarea.selectionStart);
        var selTextAfter = textarea.value.substring(textarea.selectionEnd, textarea.value.length);

        if (selText != "") {
            textarea.value = selTextBefore + newText + selTextAfter;
            textarea.setSelectionRange(selEnd, selEnd);
        }
    }
}

I want to place mouse cursor after the inserted text.
Firefox only

Online example: link text

score 1 · Answer 1 · answered Dec 18 '10 at 20:10

1

textarea.setSelectionRange(selTextBefore+newText.length, selTextBefore+newText.length);

answered Dec 18 '10 at 20:10

Andy

29,707
9
41
58

+1 since this is near enough exactly what I was gonna put as my answer... I'd say replace `selTextBefore` with `textarea.selectionStart` since, if you look at the original code, `selTextBefore` is the **string** before the selection start whereas I believe the function `setSelectionRange` expects one or two integers. – ClarkeyBoy Dec 18 '10 at 20:50

score 1 · Answer 2 · answered Dec 19 '10 at 11:57

1

There's an issue with that code: why test for window.getSelection when you never actually use it? It's the selectionStart and selectionEnd properties of the textarea you need to worry about. You should test for the feature you're about to use, not something completely unrelated based on what you know about a few browsers.

Here's a function that will do this in all major browsers, including IE (back to at least version 5, possibly 4). It's also shorter than what you've got now. I know you mentioned you only needed it to work in Firefox, but others may find the IE support useful.

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

pasteIntoInput(document.getElementById("yourTextareaId"), "NEW TEXT");

answered Dec 19 '10 at 11:57

Tim Down

318,141
75
454
536

with window.getSelection I test if its firefox – asker Dec 19 '10 at 17:41
I have a followup question, how Can I save the cursor position/selection? I need if I want to insert new text from another textbox, if you want I can open a new question – asker Dec 19 '10 at 18:03
What you want to test is whether the browser supports the objects you're about to use rather than what the browser is, hence my test for the existence of `selectionStart` and `selectionEnd` properties. As to saving the selection, what do you mean? Saving the text that was selected or the character indices of the start and end of the selection? – Tim Down Dec 19 '10 at 18:51
I will post a new questiom and paste here a link to it in 10 minutes or so. – asker Dec 19 '10 at 19:31
http://stackoverflow.com/questions/4484755/replacing-text-inside-textarea-without-focus – asker Dec 19 '10 at 19:47

Gabriele Petrioli · Accepted Answer · 2010-12-19T15:56:42.590

http://jsfiddle.net/A8tNb/5/

Find the distance from the end of the string before and after replacement and use that for the new selection.
Focus the field

Actual code

 function  setTextareaSelection(newText) {
     var selText;
     newText="This is a text \n to insert" ;
     var textarea=document.getElementById('textarea');
     if (window.getSelection) {
         var selText = "";
         selText = textarea.value.slice(textarea.selectionStart,   textarea.selectionEnd);
         var selEnd = textarea.selectionEnd;
         var fromEnd = textarea.value.length - selEnd ;
         var selTextBefore = textarea.value.substring(0, textarea.selectionStart);
         var selTextAfter = textarea.value.substring(textarea.selectionEnd, textarea.value.length);
         if (selText != "") {
             textarea.value = selTextBefore + newText + selTextAfter;
             var curs = textarea.value.length - fromEnd
             textarea.setSelectionRange(curs ,curs );
         }
         textarea.focus();
     }
 }

How about posting the code in your answer for something as simple as this? — Tim Down, Dec 19 '10 at 02:13
@Tim, it was just some update on the original code posted in the question. — Gabriele Petrioli, Dec 19 '10 at 15:56
My point is that code posted on external sites is not under SO's control and could disappear any time, destroying the helpfulness of an answer that relies solely on the external site. — Tim Down, Dec 19 '10 at 17:00

Placing a cursor after text insertion into textarea

3 Answers3