2

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!

Community
  • 1
  • 1
ajbeaven
  • 9,265
  • 13
  • 76
  • 121
  • It seems like chrome can focus to only one object at a time so it switch to object every time an event occurs. – kazinix Jul 29 '11 at 07:23
  • Easy to see in your jsFiddle here in Chrome. I have no idea why it does that. Removing the timer makes the problem go away, but then the select doesn't stick. I'll be interested to see what the answer is. – jfriend00 Jul 29 '11 at 07:30

2 Answers2

2

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.

gilly3
  • 87,962
  • 25
  • 144
  • 176
  • That's the thing, I'm not actually doing anything other than selecting the textbox. My problem is that sometimes chrome gets stuck in an endless loop of switching focus between a number of textboxes. It only seems to happen if i do it quickly, like tab at the same time as clicking. – ajbeaven Jul 29 '11 at 23:44
  • @ajbeaven - Ok, tabbing and clicking at the same time, I can see what you are talking about. Try adding a `clearTimeout()` just before you call `setTimeout()`. http://jsfiddle.net/XppG9/19/ – gilly3 Jul 30 '11 at 00:08
-1

Oh man, I just figured it out. This bug probably won't happen to you on a real website. It's happening because you are updating the DOM adding a "*" to the message div. When you do this, it pushes the content of the page down. This moves the top text box to where the mouse is, and the mouseup event is triggered on the top text box, causing both text boxes to fire a setTimeout and getting in an infinite loop. Total dibs on reporting this.

edit: it's probably not the mouseup event. looks like chrome thinks you are legit focusing on both. Here's the bug test case for Chrome: http://jsfiddle.net/delvarworld/AnBE8/

edit2: This happens in Safari too. Most likely a webkit issue.

tldr simple workaround is to not update the dom in a way that causes reflow on the focus event, as in get rid of the html() line

You could also try: 

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

Which works in Chrome for me

Andy Ray
  • 30,372
  • 14
  • 101
  • 138
  • How if the user uses tab key to navigate through textboxes? This wont work then. – kazinix Jul 29 '11 at 07:41
  • Also won't allow you to use the mouse to move the insertion point around in the field without selecting all the text or use the mouse to select part of the text. – jfriend00 Jul 29 '11 at 07:46
  • [Here](http://code.google.com/p/chromium/issues/detail?id=90962) is the link to the associated Chrome bug I just opened. Curious to see what they say or if it gets bumped to a webkit bug. – Andy Ray Jul 29 '11 at 08:26