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.

Dr.Molle · Accepted Answer · 2012-04-15T00:03:11.653

51

There may be many ways, e.g.

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

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

edited Apr 15 '12 at 00:03

answered Apr 14 '12 at 23:39

Dr.Molle

116,463
16
195
201

score 13 · Answer 2 · answered Jul 05 '21 at 09:58

13

selectionStart is enough to set initial cursor point.

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

answered Jul 05 '21 at 09:58

1ow4

131
1
2

score 5 · Answer 3 · answered Apr 14 '12 at 23:48

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.

I like this solution because it's only 2 lines of code, but I think it's more work intensive than Starx solution. — David 天宇 Wong, Dec 12 '13 at 01:12

Dagg Nabbit · Answer 4 · 2012-04-14T23:40:48.473

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.

score 3 · Answer 5 · edited May 23 '17 at 12:34

3

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]

edited May 23 '17 at 12:34

Community

1
1

answered Apr 14 '12 at 23:51

Starx

77,474
47
185
261

score 2 · Answer 6 · answered Apr 15 '12 at 05:39

2

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

answered Apr 15 '12 at 05:39

kennebec

102,654
32
106
127

score 1 · Answer 7 · answered Oct 12 '13 at 13:26

1

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

answered Oct 12 '13 at 13:26

yckart

32,460
9
122
129

score 0 · Answer 8 · answered Jun 10 '19 at 17:47

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

How to set cursor at the end in a textarea?

8 Answers8