Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 930
Peeter Avatar asked May 14 '11 16:05

Peeter


People also ask

How do I change the cursor position in textarea?

To set the cursor at the end of a textarea: Use the setSelectionRange() method to set the current text selection position to the end of the textarea. Call the focus() method on the textarea element. The focus method will move the cursor to the end of the element's value.


2 Answers

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);
};
like image 135
Tim Down Avatar answered Sep 25 '22 06:09

Tim Down


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;
}
like image 42
sitifensys Avatar answered Sep 23 '22 06:09

sitifensys