CODEWITHSUNDEEP
javascripthtmlfirefoxtextarea
Brian Hawk
Brian Hawk

Reputation: 806

How to set cursor at the end in a textarea?

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.

Upvotes: 33

Views: 39814

Answers (8)

1ow4
1ow4

Reputation: 181

selectionStart is enough to set initial cursor point.

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

Upvotes: 18

xdeepakv
xdeepakv

Reputation: 8125

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

Upvotes: 0

yckart
yckart

Reputation: 33378

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

Upvotes: 1

kennebec
kennebec

Reputation: 104760

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

Upvotes: 2

Dr.Molle
Dr.Molle

Reputation: 117314

There may be many ways, e.g.

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

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

Upvotes: 56

Starx
Starx

Reputation: 78971

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]

Upvotes: 3

Lazerblade
Lazerblade

Reputation: 1127

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.

Upvotes: 5

Dagg Nabbit
Dagg Nabbit

Reputation: 76736

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.

Upvotes: 3

Related Questions