How to place cursor at end of text in textarea when tabbed into [duplicate]

Question

Possible Duplicate:
Javascript: Move caret to last character

I have a standard textarea with some text in it. I'm looking for a way to have the cursor automatically be placed at the end of the existing text so a user can simply start typing to add more text. This should happen whenever the textarea becomes active such as when a user tabs into it. Any ideas?

Trudy

Answer 1

I've answered this before: Javascript: Move caret to last character

jsFiddle: http://jsfiddle.net/ghAB9/6/

Code:

<textarea id="test">Some text</textarea>

function moveCaretToEnd(el) {
    if (typeof el.selectionStart == "number") {
        el.selectionStart = el.selectionEnd = el.value.length;
    } else if (typeof el.createTextRange != "undefined") {
        el.focus();
        var range = el.createTextRange();
        range.collapse(false);
        range.select();
    }
}

var textarea = document.getElementById("test");

textarea.onfocus = function() {
    moveCaretToEnd(textarea);

    // Work around Chrome's little problem
    window.setTimeout(function() {
        moveCaretToEnd(textarea);
    }, 1);
};

Anastassia

Can you explain why window.setTimeout fixed the problem in Chrome? It worked for me but I don't understand the logic behind – Boner

@HP: The problem in Chrome (at least in the version that was current when this answer was written) is that it fires the focus event and then displays the caret, meaning that the browser only displays the caret after moveCaretToEnd() has been called. The window.setTimeout() call allows the browser to display the caret first and then JavaScript moves it into place. – Anastassia

Answer 2

You need to listen to the focus event in the text area for example :

<textarea onfocus="setCursorAtTheEnd(this,event)"/>

And then in your javascript code:

function setCursorAtTheEnd(aTextArea,aEvent) {
    var end=aTextArea.value.length;
    if (aTextArea.setSelectionRange) {
        setTimeout(aTextArea.setSelectionRange,0,[end,end]);  
    } else { // IE style
        var aRange = aTextArea.createTextRange();
        aRange.collapse(true);
        aRange.moveEnd('character', end);
        aRange.moveStart('character', end);
        aRange.select();    
    }
    aEvent.preventDefault();
    return false;
}

Katonah

Note that the default action of aEvent is inhibited. This prevents the browser from selecting all the whole text (for example in firefox) Not sure if this code is cross browser compatible. – Katonah

The general approach is correct (apart from you have text where you meant aTextArea on the second line), but it won't work in Chrome. – Anastassia

@Tim : You are right, I've edited the code thanks :). Regarding chrome (and perhaps other webkit based browser), do you know the equivalent function for setting the selection (or does this method fail for another reason) ? – Katonah

@sitifensys: The method works in Chrome but the focus event fires too early and the browser moves the cursor after the event handler has placed it at the end. You can get round this by using a brief timer. – Anastassia

@Tim Down I've edited the code again and added a setTimout call :). But a question still remains, isn't preventDefault() supposed to cancel the default action of the event in chrome ? or did I misread the DOM specification ? – Katonah

No, you haven't misread the spec, but it appears to be impossible to prevent a textarea from receiving focus by using preventDefault() in Chrome (or indeed Firefox). – Anastassia