Google Chrome, endless loops and text selection

Question

This question has a bit of background. See two other questions I recently posted that relate to:

How to select text in a cross browser with a text box
Endless loops created in Google Chrome

A word of warning: it is possible that the second link is a red herring.

Ok, so the problem is that I try to do this, when the user first clicks or enters tabs in the text box, all texts should be selected. If the text field has focus, subsequent clicks on the text inside the text field should behave normally (i.e. Do not iterate over the entire text). The answer that I choose in the first link above is the one I found in all browsers. The code below is 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 working with with this approach. With interruptions, it seems Google Chrome is stuck somewhere and begins to very quickly change focus between text fields. You can see what I think is happening here: http://jsfiddle.net/ajbeaven/XppG9/14/

As I said, this is an intermittent problem, so you may need to reload the page several times to see what, in my opinion, can cause a change in focus. Remember that this only happens in chrome.

Thanks to everyone who can shed light!

Answer 1

Put the extra work into the setTimeout function. And add 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 html to the page (apparantly) causes the field to lose focus, and select() forces it to receive focus 1 ms later, thereby triggering a focus event and causing an infinite loop. Moving the html call invocation to a function that selects text seems to do the trick.

Answer 2

Oh man, I just figured it out. Probably, this error will not be with you on a real site. This is because you are updating the DOM by adding "*" to the message div. When you do this, it pushes the contents of the page down. This moves the top text box to where the mouse is, and the mouseup event fires in the top text box, causing both text boxes to fire setTimeout and getting into an infinite loop. The total number of posts about this.

edit: this is probably not a mouseup event. It seems chrome thinks you are fully focused on both. Here is an example error test for Chrome: http://jsfiddle.net/delvarworld/AnBE8/

edit2: This also happens in Safari. Most likely a problem with the website.

A simple workaround for TL; DR is not to update the dom in such a way as to cause payment for the focal event, as in getting rid of the html () line

You can also try:

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

What works in Chrome for me