我想将光标放在文本框的开头 onfocus [重复]答案

【问题标题】：I want to put cursor in beginning of text-box onfocus [duplicate]我想将光标放在文本框的开头 onfocus [重复]
【发布时间】：2011-11-18 21:28:36
【问题描述】：

可能重复：
Set cursor at a length of 14 onfocus of a textbox

我可以在 Firefox 和 IE 中做到这一点。但由于某种原因，它在 Chrome 和 Safari 中不起作用:(

我只是使用下面的 onfocus 行

$('input:text').focus(
function(){
      document.getElementById('id').setSelectionRange(0, 0);
    });

谁能告诉我如何在 Chrome 和 safari 中做类似的事情？

【问题讨论】：

我在发布这个问题之前已经尝试过了。还有其他类似的问题，但是 createTextRange 和 setSelectionRange 在我的 safari n chrome 上都不适合我。有什么建议吗？
这不应该因为重复而关闭，因为上面提到的问题没有解决这个问题的答案 - 它在 Webkit 中失败。

标签： javascript onfocus

【解决方案1】：

问题是 Chrome（我还没有听说过 Safari 也这样做，但我会告诉你）在焦点事件触发后终止选择，所以你需要添加一个计时器。以下内容改编自我在这里的回答：

How to place cursor at end of text in textarea when tabbed into

但是，这通常不是很好的可用性：它与用户的期望相反，并且在使用鼠标时删除了有用的功能（即插入符号转到用户单击的位置）。您可能可以通过处理mousedown 和mouseup 事件来解决这个问题。

现场演示：http://jsfiddle.net/timdown/z9DhX/1/

代码：

function moveCaretToStart(el) {
    if (typeof el.selectionStart == "number") {
        el.selectionStart = el.selectionEnd = 0;
    } else if (typeof el.createTextRange != "undefined") {
        el.focus();
        var range = el.createTextRange();
        range.collapse(true);
        range.select();
    }
}

var textBox = document.getElementById("id");

textBox.onfocus = function() {
    moveCaretToStart(textBox);

    // Work around Chrome's little problem
    window.setTimeout(function() {
        moveCaretToStart(textBox);
    }, 1);
};

【讨论】：

非常感谢您的解释！它现在可以在所有浏览器中使用超时 fn :)
谢谢蒂姆。到目前为止，我在 SO 上看到的最有用的答案。

【解决方案2】：

Webkit 正在重置插入符号位置作为焦点事件的一部分。您需要将脚本的执行推迟到事件完全触发之后。使用 setTimeout 并延迟 0 就足够了：

$(":text").focus(function () {
    var input = this;
    setTimeout(function() {
        input.setSelectionRange(0, 0);
    }, 0);
});

工作演示：http://jsfiddle.net/ZkqGH/1/

【讨论】：

感谢您的回答，但它还没有工作 :( .. 当我在文本框内部单击时，我的光标位于文本框值的末尾（仅在 chrome 和 safari 中）。在 Firefox 中按预期工作正常.
@Deepak - 我重写了我的答案。 setSelectionRange() 工作正常，您只需要延迟执行以防止 Chrome 重置插入符号位置。