谷歌浏览器，无限循环和选择文本 [英] Google chrome, infinite loops and selecting text

问题描述

这个问题带有一些背景。请参阅我最近发布的其他两个相关问题：

如何在跨浏览器的文本框中选择文本

在谷歌浏览器中创建的无限循环

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

好的，我的问题是，当用户第一次点击或标签到文本框时，所有文本都应该被选中。如果文本框具有焦点，则对文本框内文本的后续点击应该正常运行（即不会重新选择所有文本）。我在上面第一个链接中选择的答案是我在所有浏览器中找到的答案。下面的代码为您提供便利：

  $（'input [type =text]'）。live（'focus' ，函数（事件）{
 var inp = this; 
 setTimeout（function（）{
 inp.select（）; 
}，1）; 
 
 event.stopPropagation（）; 
 event.preventDefault（）; 
 return false; 
}）; 
  

现在我的第二个链接就是我似乎正在运用这种方法。间歇性地看来，谷歌浏览器卡在某处，开始改变文本框之间的焦点非常快。你可以在这里看到我的想法： http://jsfiddle.net/ajbeaven/XppG9/14 /

就像我说过的，这似乎是一个间歇性的问题，所以您可能需要尝试重新加载页面几次，才能看到我认为可能会导致焦点的变化。请记住，它似乎只发生在铬。

感谢任何人谁可以摆脱一些光！

解决方案

在 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（）+* \\\​）; 
 inp.select（）; 
}，1）; 
}）; 
  

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

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

This question comes with a bit of background. Please see two other questions I've recently posted that relate:

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

Word of warning: it's possible that the second link is a red herring.

Ok so my problem is that I'm trying to have it so when a user first clicks or tabs in to a textbox, all the text should become selected. If the textbox has focus, subsequent clicks on the text inside the textbox should behave normally (ie. doesn't re-select all the text). The answer I choose in the first link above is the one I found worked across all browsers. Code posted below for your convenience:

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

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

Now my second link above is what I seem to be running in to with this approach. It seems that intermittently, google chrome gets stuck somewhere and starts changing the focus between textboxes really fast. You can see what I think is happening here: http://jsfiddle.net/ajbeaven/XppG9/14/

Like I said, it seems to be an intermittent problem so you might have to try reloading the page a couple of times in order to see what I think might be causing the changing of focus. Remember, it only seems to happen in chrome.

Thanks to anyone who can shed some light!

解决方案

Put any additional work in the setTimeout function. And add a clearTimeout() before you setTimeout():

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/

In Chrome, writing the html to the page is (apparantly) causing the field to lose focus, and select() is causing it to receive focus 1ms later, thus triggering the focus event and causing the infinite loop. Moving the write html call into the function that selects the text seems to do the trick.

这篇关于谷歌浏览器，无限循环和选择文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！