我想把光标放在文本框onfocus的开头

Question

可能重复:
将光标设置为文本框的14个焦点

我能够在Firefox和IE中做到这一点.但由于某种原因,它不适用于Chrome和Safari :(

我只是使用下面的onfocus

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

有人可以告诉我如何在Chrome和Safari中做类似的事情吗？

Answer 1

问题是Chrome(我还没有听说Safari也这样做,但我会告诉你)在焦点事件触发后杀死了选择,所以你需要添加一个计时器.以下内容改编自我的回答:

选中时如何将光标放在textarea中的文本末尾

然而,这通常不是很好的可用性:它与用户期望的相反,并且当使用鼠标时(即插入到用户点击的位置的插入符号)移除了有用的功能.您可以通过一些处理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);
};

Answer 2

Webkit正在重置插入位置作为焦点事件的一部分.您需要推迟执行脚本,直到事件完全触发为止.使用setTimeout延迟0足够好:

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

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