CODEWITHSUNDEEP
javascriptjqueryhtmlcssweb
Stack Man
Stack Man

Reputation: 579

Autofocus With Cursor On End Of Textbox

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.

Upvotes: 10

Views: 18966

Answers (6)

Avinash Antala
Avinash Antala

Reputation: 671

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" />

Upvotes: 20

kki3908050
kki3908050

Reputation: 165

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;"/>

Upvotes: 3

AKHIL K A
AKHIL K A

Reputation: 49

$( document ).ready(function() {

 var t =$("#txtID");    

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

});

Upvotes: 2

TheProvost
TheProvost

Reputation: 1893

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

Upvotes: 1

Eliel
Eliel

Reputation: 164

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

Upvotes: 0

philz
philz

Reputation: 1022

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>

Upvotes: 2

Related Questions