Question

我想将自动对焦放在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>

我希望在文本回显后放置Cursor。这不是textarea的价值。

我提到的文本框也是Textarea。

Answer 1

请使用此代码并运行浏览器

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试运行这个简单的代码，看看你会注意到第一个文本框将被聚焦而不是第二个

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

Answer 3

点击chris G's answer上的this question。将焦点设置到文本框后调用函数：

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

Answer 4

像这样的东西。聚焦它，并再次设置值。

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

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

Answer 5

$( document ).ready(function() {

 var t =$("#txtID");    

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

});

Answer 6

您的链接的答案已经自动关注页面加载。

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

JS Fiddle

自动对焦与光标在文本框的末尾

6 个答案: