谷歌浏览器，无限循环和选择文本

Question

这个问题有一点背景。请查看我最近发布的另外两个相关问题：

How to select text in a textbox cross-browser
Infinite loops created in google chrome

警告词：第二个链接可能是红鲱鱼。

好的，所以我的问题是我试图拥有它，所以当用户第一次点击或进入文本框时，所有文本都应该被选中。如果文本框有焦点，随后点击文本框内的文本应该正常（即不会重新选择所有文本）。我在上面第一个链接中选择的答案是我发现在所有浏览器中都有效的答案。为方便起见，将代码贴在下面：

$('input[type="text"]').live('focus', function (event) {
    var inp = this;
    setTimeout(function () {
        inp.select();
    }, 1);

    event.stopPropagation();
    event.preventDefault();
    return false;    
});

现在我上面的第二个链接是我似乎正在使用这种方法。似乎间歇性地，谷歌浏览器卡在某个地方并开始快速改变文本框之间的焦点。你可以在这里看到我认为正在发生的事情：http://jsfiddle.net/ajbeaven/XppG9/14/

就像我说的那样，这似乎是一个间歇性问题，因此您可能必须尝试重新加载页面几次才能查看我认为可能导致焦点变化的原因。请记住，它似乎只发生在 chrome 中。

感谢任何可以阐明的人！

Answer 1

在setTimeout 函数中添加任何额外的工作。并在setTimeout() 之前添加clearTimeout()：

var focusTimeout = 0;
$('input[type="text"]').live('focus', function(event) {
    var inp = this;
    clearTimeout(focusTimeout);
    focusTimeout = setTimeout(function() {
        $('#message-container').html($('#message-container').html() + "*\u200b");
        inp.select();
    }, 1);
});

http://jsfiddle.net/XppG9/19/

在 Chrome 中，将 html 写入页面（显然）导致字段失去焦点，select() 导致其在 1ms 后接收焦点，从而触发焦点事件并导致无限循环。将 write html 调用移到选择文本的函数中似乎可以解决问题。

Answer 2

哦，伙计，我刚刚想通了。在真实的网站上，这个错误可能不会发生在您身上。发生这种情况是因为您正在更新 DOM，将“*”添加到消息 div。当你这样做时，它会将页面的内容向下推。这会将顶部文本框移动到鼠标所在的位置，并且在顶部文本框上触发 mouseup 事件，导致两个文本框触发 setTimeout 并进入无限循环。报告此问题的总次数。

编辑：它可能不是 mouseup 事件。看起来 chrome 认为你在这两者上都是合法的。这是 Chrome 的错误测试用例：http://jsfiddle.net/delvarworld/AnBE8/

edit2：这也发生在 Safari 中。很可能是 webkit 问题。

tldr 简单的解决方法是不要以导致焦点事件重排的方式更新 dom，如摆脱 html() 行

你也可以试试：

$('input[type="text"]').live('mouseup', function (event) {

这适用于我的 Chrome