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

时间:2013-07-22 05:52:29

标签: javascript jquery css

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

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

这是一个js小提琴,其中突出显示自动对焦文本的值:http://jsfiddle.net/TaGL5/

以下是HTML代码:<input type="text" value="value text" autofocus />

5 个答案:

答案 0 :(得分:42)

这对我有用

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

答案 1 :(得分:23)

升级到@harsha的回答:我发现要使解决方案适用于Firefox, 我们需要临时重置值为“不等于值”,然后将其设置回

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

答案 2 :(得分:6)

使用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 :(得分:2)

使用它,对我来说很不错...

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

答案 4 :(得分:1)

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

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

注意:2017年在Chromium下运作良好。