Autofocus With Cursor On End Of Textbox

Question

I want to put autofocus on a html textbox such that the cursor points to the end of some text already present in the textbox. I know what the autofocus attribute does. And I have also seen put cursor at end of text input's value which answers how to put cursor at the end, But the textbox is not autofocussed upon page reload. How can I do both - autofocus the textbox upon page reload and put cursor to end of text ?

Code : 

 <textarea id="txtArea" style="width:106%; height:100px" align="center" name="task1" onkeypress="onTestChange();" onfocus="this.value = this.value;" autofocus ><?php echo $_GET["task"];?></textarea>

I want to put Cursor after the text echoed. It is not the value of the textarea.

Also the textbox I referred to is Textarea.

http://stackoverflow.com/questions/20252449/jquery-focus-textbox-and-go-to-end-but-also-set-the-position-of-the-cursor-so-u — Vitorino fernandes, Nov 07 '14 at 05:54
http://jsfiddle.net/fuhhxcrk/ Do you want some thing like this. — Rushee, Nov 07 '14 at 06:00
@kki3908050 Not Working Cursor still points at beginning only — Stack Man, Nov 07 '14 at 06:59
please check this link out................ http://codepen.io/anon/pen/tgzDL — kki3908050, Nov 07 '14 at 07:16

score 19 · Accepted Answer · edited Jun 10 '20 at 14:51

19

Please use this code and run in your browser

$(document).ready(function() {
  
    var input = $("#test");
    var len = input.val().length;
    input[0].focus();
    input[0].setSelectionRange(len, len);

});

<input type="text" id="test" autofocus value="value text" />

edited Jun 10 '20 at 14:51

answered Nov 07 '14 at 07:04

Avinash Antala

641
5
10

score 3 · Answer 2 · edited Nov 07 '14 at 06:14

3

try to run this simple code and see u will notice that first text box will be focused and not the second

<input type="text" autofocus value="value text" onfocus="this.value = this.value;"/>
<input type="text" autofocus value="value text" onfocus="this.value = this.value;"/>

edited Nov 07 '14 at 06:14

Vitorino fernandes

15,794
3
20
39

answered Nov 07 '14 at 05:59

kki3908050

165
2
9

score 2 · Answer 3 · answered Nov 07 '14 at 05:45

2

Something like this. Focus it, and set the value again.

<input type="text" value="this holds a value" id="element"/>

<script>
$(window).ready(function(){
   $("#element").focus(); 
   $("#element").val($("#element").val());
});
</script>

answered Nov 07 '14 at 05:45

philz

1,012
6
11

score 2 · Answer 4 · edited Nov 07 '14 at 06:11

2

$( document ).ready(function() {

 var t =$("#txtID");    

 t.focus().val(t.val());

});

edited Nov 07 '14 at 06:11

Suchit kumar

11,809
3
22
44

answered Nov 07 '14 at 06:05

AKHIL K A

59
6

score 1 · Answer 5 · edited May 23 '17 at 12:24

Check chris G's answer on this question. Call function after you have set the focus to the textbox:

   function SetCaretAtEnd(elem) {
            var elemLen = elem.value.length;
            // For IE Only
            if (document.selection) {
                // Set focus
                elem.focus();
                // Use IE Ranges
                var oSel = document.selection.createRange();
                // Reset position to 0 & then set at end
                oSel.moveStart('character', -elemLen);
                oSel.moveStart('character', elemLen);
                oSel.moveEnd('character', 0);
                oSel.select();
            }
            else if (elem.selectionStart || elem.selectionStart == '0') {
                // Firefox/Chrome
                elem.selectionStart = elemLen;
                elem.selectionEnd = elemLen;
                elem.focus();
            } // if
        } // SetCaretAtEnd()

score 0 · Answer 6 · answered Nov 07 '14 at 05:47

0

The answer to your link already auto focused on page load.

<input type="text" autofocus value="value text" onfocus="this.value = this.value;"/>

JS Fiddle

answered Nov 07 '14 at 05:47

Eliel

164
6

Like what the poster said this only works on first load. He wants it to focus every request – TheProvost Nov 07 '14 at 05:49

Autofocus With Cursor On End Of Textbox

6 Answers6