如何在Google Chrome中将光标位置设置到输入文本的末尾

Question

我正在尝试使用焦点函数在文本字段中设置光标。我做了一些研究，但似乎没有任何提供的解决方案在Google Chrome中起作用。在Internet Explorer和Firefox中，此解决方案可以很好地工作：

js代码：

$('#Search').focus(function() {
  var SearchInput = $('#Search');
  var strLength= SearchInput.val().length;
  SearchInput.focus();
  SearchInput[0].setSelectionRange(strLength, strLength);
});

HTML代码：

<input type="text" id="Search" value="Hello World" />

这是我的jsfiddle链接。

有没有办法在Google Chrome中使它也能工作？

- Guilherme Vaz

Answer 1

当你聚焦在一个输入框上时，似乎焦点事件会在光标放置之前触发。一个巧妙的解决方法是使用setTimeout，代码如下：

$('#Search').focus(function() {
    setTimeout((function(el) {
        var strLength = el.value.length;
        return function() {
            if(el.setSelectionRange !== undefined) {
                el.setSelectionRange(strLength, strLength);
            } else {
                $(el).val(el.value);
            }
    }}(this)), 0);
});

尝试这个示例： http://jsfiddle.net/esnvh/26/

已编辑为0ms超时，因为@SparK指出这足以推送到执行队列的末尾。

- ruuska

---

谢谢你的回答！我没想到这个！看起来效果真不错。我会在我的项目中尝试这种方法。 - Guilherme Vaz

运行得很好！我会标记你的答案。非常感谢！ - Guilherme Vaz

很高兴能够帮助，已经更新了答案，并为非Chrome浏览器提供了备用方案。请查看@Paul-Rad-Dupuy的答案。 - ruuska

哦，我明白了。我也希望我能把他的答案标记为有用，但是我没有足够的声望:P 好的，再次感谢！ - Guilherme Vaz

使用setTimeout(func, 0); 可以使得func函数在执行队列的末尾。请注意，它不会立即在单独的线程中运行。 - SparK

太棒了！救了我的一命。 - user4447859

Answer 2

更新的代码

参考：http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

setSelectionRange不支持IE，Opera和Safari。

我建议您制作类似这样的东西（适用于IE，Chrome，Safari和Firefox）。

$('#Search').on('mouseup', function() {
    var element = $(this)[0];
    if (this.setSelectionRange) {
        var len = $(this).val().length * 2;
        element.setSelectionRange(len, len);
    }
    else {
        $(this).val($(this).val());
        $(this).focus();
    }
    element.scrollTop = 9999;
});

尝试这个：

http://jsfiddle.net/r5UVW/4/

- Paul Rad

---

谢谢你的回答！我尝试了你的代码，但在Chrome中似乎不起作用。是只有我这样吗？ - Guilherme Vaz

更新的 fiddle 演示 ;-) - Paul Rad

谢谢您的更新！ :) 问题是我的客户抱怨说当他点击文本字段时，光标不在其末尾。 显然，在Chrome中，聚焦操作仅与触发器一起工作。 请在页面加载后单击该字段并查看发生了什么。 再次感谢！ - Guilherme Vaz

谢谢Paul！问题是，不仅仅点击字段应该定位光标，而且使用键盘从其他字段切换到该字段时也应该定位光标... - Guilherme Vaz

Answer 3

使用mouseup事件实现：

$("#Search").mouseup(function () {
    this.setSelectionRange(this.value.length, this.value.length);    
});

- Anoop Joshi P

---

这似乎可以工作，但如果我有更多的文本字段，并使用 Tab 键导航它们呢？实际情况是，我正在尝试在货币掩码字段中使用它。 - Guilherme Vaz

Answer 4

没有jQuery :)

private focusOnLastInput(): void {
  const items = this.fields.querySelectorAll('input');
  const lastInput = items[items.length - 1];
  const valueLength = lastInput.value.length;

  lastInput.focus();
  lastInput.setSelectionRange(valueLength, valueLength);
}

- Michael Lester

Answer 5

提醒一下，目前数字输入框不支持 setSelectionRange()，因此一个快速解决方案是使用 .select() 选择文本。在桌面浏览器上，这会高亮显示文本，在移动设备上，这会将光标直接移动到文本的末尾。

- DanV