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

Google chrome, infinite loops and selecting text

本文关键字：选择 文本 无限循环 谷歌浏览器      更新时间：2023-09-26

这个问题有一些背景知识。请参阅我最近发布的另外两个相关问题:

如何跨浏览器选择文本框中的文本
在google chrome中创建无限循环

警告:有可能第二个链接是转移注意力的。

好的，所以我的问题是，我试图有它，所以当用户第一次点击或标签在一个文本框，所有的文本应该成为选中。如果文本框有焦点，随后点击文本框内的文本应该表现正常(即。不会重新选择所有文本)。我在上面的第一个链接中选择的答案是我发现适用于所有浏览器的答案。为方便起见，代码如下:

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

现在我上面的第二个链接似乎是我用这种方法遇到的。似乎断断续续，google chrome在某个地方卡住了，开始在文本框之间快速地改变焦点。你可以在这里看到我认为发生了什么:http://jsfiddle.net/ajbeaven/XppG9/14/

就像我说的，这似乎是一个间歇性的问题，所以你可能不得不尝试重新加载页面几次，以看到我认为可能导致焦点的变化。请记住，这似乎只发生在chrome中。

感谢任何可以提供一些启示的人!

将任何额外的工作放在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调用移到选择文本的函数中似乎可以达到目的。

天哪，我刚想明白了。在一个真实的网站上，这个错误可能不会发生在你身上。发生这种情况是因为您正在更新DOM，向消息div添加"*"。当您这样做时，它会将页面的内容向下推。这会将顶部文本框移动到鼠标所在的位置，并且在顶部文本框上触发mouseup事件，从而导致两个文本框触发setTimeout并进入无限循环。总有权利报告这个

编辑:可能不是mouseup事件。看起来chrome认为你是合法的专注于这两个。以下是Chrome的bug测试用例:http://jsfiddle.net/delvarworld/AnBE8/

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

tldr的简单解决方法是不以导致焦点事件流的方式更新dom，如删除html()行

你也可以试试:

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

相关文章：