javascript - 我想将光标放在文本框 onfocus 的开头

Question

可能重复：
在文本框的焦点上设置光标长度为 14

我可以在 Firefox 和 IE 中做到这一点。但由于某种原因，它无法在 Chrome 和 Safari 中运行 :(

我只是使用下面的线 onfocus

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

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

Answer 1

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

选项卡进入时如何将光标放在文本区域中的文本末尾

但是，这通常不是很好的可用性：它与用户的期望相反，并且在使用鼠标时删除了有用的功能（即插入符号转到用户单击的位置）。您可能可以通过一些处理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/