javascript 在文本框末尾使用光标自动对焦

Autofocus With Cursor On End Of Textbox

提问by Stack Man

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 valuewhich 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 ?

我想将自动对焦放在 html 文本框上，以便光标指向文本框中已存在的某些文本的末尾。我知道 autofocus 属性的作用。而且我还看到put cursor at end of text input's value它回答了如何将光标放在最后，但文本框在页面重新加载时不会自动聚焦。我怎样才能做到这两者 - 在页面重新加载时自动聚焦文本框并将光标置于文本末尾？

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.

我想在文本回显之后放置 Cursor。它不是 textarea 的值。

Also the textbox I referred to is Textarea.

另外我提到的文本框是Textarea。

回答by Avinash Antala

Please this code use and run 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" />

回答by kki3908050

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

回答by AKHIL K A

$( document ).ready(function() {

 var t =$("#txtID");    

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

});

回答by TheProvost

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

检查克里斯 G对这个问题的回答。将焦点设置到文本框后调用函数：

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

回答by philz

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>

回答by Eliel

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

JS小提琴