Question

可能重复：
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中做类似的事情吗？

Answer 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);
};

Answer 2

Webkit正在重置插入位置作为焦点事件的一部分。您需要推迟执行脚本，直到事件完全触发为止。使用延迟为setTimeout的{{1}}就足够了：

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

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

2 个答案: