Howto Place cursor at beginning of textarea

Question

I've found a couple resources for how to place the cursor in a textarea at the end of the text, but I can't sort out a simple way to make it appear at the beginning.

I'm prepopulating the textarea with some text and just want to make it easier on the users.

Ramiroramjet

Answer 1

Pass a reference to your textarea to this JS function.

function resetCursor(txtElement) { 
    if (txtElement.setSelectionRange) { 
        txtElement.focus(); 
        txtElement.setSelectionRange(0, 0); 
    } else if (txtElement.createTextRange) { 
        var range = txtElement.createTextRange();  
        range.moveStart('character', 0); 
        range.select(); 
    } 
}

Omniscience

Answer 2

Depending on your needs, a simpler Javascript version is:

document.querySelector("textarea").focus(); //set the focus - cursor at end
document.querySelector("textarea").setSelectionRange(0,0); // place cursor at start

You can't just string them together either, to get rid of the double querySelector - not sure why.

Urbanism

Answer 3

The jQuery way:

$('textarea[name="mytextarea"]').focus().setSelectionRange(0,0);

Ashelman

This won't work. Should be: $('textarea[name="mytextarea"]').focus().get(0).setSelectionRange(0,0); ... the added get(0) is to expose the DOM element since setSelectionRange() is a DOM method rather than a jQuery one. – Quahog

Answer 4

please, use for textarea with scroll after using $(textareaSelector).val(val)

$(textareaSelector)[0].setSelectionRange(0, 0);
$(textareaSelector).focus();

Griffey

Answer 5

Removed the spaces between the tags
like this:

<textarea rows="5" cols="50" name="extra"></textarea>

Mcmullen