将光标放在文本输入值的末尾答案

【问题标题】：put cursor at end of text input's value将光标放在文本输入值的末尾
【发布时间】：2013-07-20 18:51:03
【问题描述】：

所以，目前我有一个文本输入字段，其值也是自动聚焦的。

在页面加载时，该值被选中/突出显示。有没有办法可以将光标放在值文本的末尾，而不是在 javascript 或 CSS 中突出显示它？

这是一个 js fiddle，其中突出显示了自动聚焦文本的值：http://jsfiddle.net/TaGL5/

这是 HTML 代码：<input type="text" value="value text" autofocus />

【问题讨论】：

onfocus="this.value = this.value;"
onfocus "this.value = this.value" 会将现有值分配给文本框，就像您输入了该文本，所以光标在末尾。
Use JavaScript to place cursor at end of text in text input element的可能重复

标签： javascript jquery css

【解决方案1】：

这对我有用

&lt;input type="text" autofocus value="value text" onfocus="this.value = this.value;"/&gt;

【讨论】：

只是为了更新，这要么不再适用于 FF，要么永远不会。在当前版本的FF中，它选择整个文本，它不会将光标放在后面。
我发现这个答案很有帮助，并且可以跨多个浏览器正常工作：stackoverflow.com/a/19568146/936468
我投了赞成票。我认为这是一个很好的解决方案。否决票不是我。

【解决方案2】：

为此使用 Jquery：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<input type="text" id="txt1" value="Lorem" style="width:400px;" />

但是有些浏览器不支持enter code here属性，在这种情况下使用这个：

$(document).ready(function(){
    $("#search").focus(function(){
        if (this.setSelectionRange)
        {
        var len = $(this).val().length;
        this.setSelectionRange(len, len);
        }
        else
        {
        $(this).val($(this).val());
        }
   
});

$("#search").focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input id="search" type="text" value="mycurrtext" size="30" name="search" />

stackoverflow 上已经存在这个问题：

Reference1

Reference2

【讨论】：

这么简单的任务使用第三方库有点矫枉过正

【解决方案3】：

升级到@harsha 的answer

我发现要使解决方案适用于 Firefox，我们需要临时将值重置为“不等于值”，然后将其重新设置

&lt;input type="text" autofocus value="value text" onfocus="var temp_value=this.value; this.value=''; this.value=temp_value" /&gt;

【讨论】：

@vol7ron "chenosaurus 的方法" :D
我（对 Spring Boot 很陌生）并正在使用它。看来我需要使用这种方法来获得预期的效果。

【解决方案4】：

您可以将此参数添加到您的文本输入字段中：

onmouseover="this.setSelectionRange(this.value.length,this.value.length);"
onfocus="this.setSelectionRange(this.value.length,this.value.length);"

注意：2017 年在Chromium 下运行良好。

【讨论】：

【解决方案5】：

使用这个，它对我来说很好......

<input type="text" name="txt" value="value text" autofocus="" onfocus="this.setSelectionRange(this.value.length,this.value.length);">

或将此行添加到您的输入元素

onfocus="this.setSelectionRange(this.value.length,this.value.length);"

【讨论】：