How to set cursor at the end in a textarea?

Question

Is there a way to set the cursor at the end in a textarea element? I'm using Firefox 3.6 and I don't need it to work in IE or Chrome. It seems all the related answers in here use onfocus() event, which seems to be useless because when user clicks on anywhere within the textarea element Firefox sets cursor position to there. I have a long text to display in a textarea so that it displays the last portion (making it easier to add something at the end).

No frameworks or libraries.

Cybernetics

Answer 1

There may be many ways, e.g.

element.focus();
element.setSelectionRange(element.value.length,element.value.length);

http://jsfiddle.net/doktormolle/GSwfW/

Orelee

Answer 2

selectionStart is enough to set initial cursor point.

    element.focus();
    element.selectionStart = element.value.length;

Hypoxanthine

Answer 3

It's been a long time since I used javascript without first looking at a jQuery solution...

That being said, your best approach using javascript would be to grab the value currently in the textarea when it comes into focus and set the value of the textarea to the grabbed value. This always works in jQuery as:

$('textarea').focus(function() {
    var theVal = $(this).val();
    $(this).val(theVal);
});

In plain javascript:

var theArea = document.getElementByName('[textareaname]');

theArea.onFocus = function(){
    var theVal = theArea.value;
    theArea.value = theVal;
}

I could be wrong. Bit rusty.

Goggle

I like this solution because it's only 2 lines of code, but I think it's more work intensive than Starx solution. – Idio

Answer 4

var t = /* get textbox element */ ;

t.onfocus = function () { 
    t.scrollTop = t.scrollHeight; 
    setTimeout(function(){ 
      t.select(); 
      t.selectionStart = t.selectionEnd; 
    }, 10); 
}

The trick is using the setTimeout to change the text insertion (carat) position after the browser is done handling the focus event; otherwise the position would be set by our script and then immediately set to something else by the browser.

Gawk

Answer 5

Here is a function for that

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

[Demo][Source]

Cush

Answer 6

textarea.focus()
textarea.value+=' ';//adds a space at the end, scrolls it into view

Borodin

Answer 7

(this.jQuery || this.Zepto).fn.focusEnd = function () {
    return this.each(function () {
        var val = this.value;
        this.focus();
        this.value = '';
        this.value = val;
    });
};

Aloeswood

Answer 8

@Dr.Molle answer is right. just for enhancement, U can combine with prevent-default.

http://jsfiddle.net/70des6y2/

Sample:

document.getElementById("textarea").addEventListener("mousedown", e => {
  e.preventDefault();
  moveToEnd(e.target);
});
function moveToEnd(element) {
  element.focus();
  element.setSelectionRange(element.value.length, element.value.length);
}

Rollin