Workaround To Webkit[chrome/safari] Javascript Select On Focus Bug (when Using Tab Between Fields)

a similar issue appeared here: 3380458: When attempting to select on focus using the following jquery, it does not work in webkit: $('#out').focus(function(){ $('#out').select();

Solution 1:

The problem probably originate somewhere in my layout/CSS/javascript. For some reason tabbing into fields in Chrome never highlights the entire textbox. In fact, tabbing into the field should always highlight what's in the textbox, even without the webkit bug workaround, as seen here in the SECOND field:

http://cornsyrup.org/~larry/select.html

In any case, while I search for the real culprit in this mess, I use setTimeout as a workaround:

    $(document).ready(function() {
        $('.texty').focus(texty_focus);
    });
    functiontexty_focus() {
        var input = $(this);
        setTimeout(function() { 
            input.select();
        },10);
    }

This has other benefits for use with mobile browsers (specifically iPad in my case), so although it's not the most graceful solution, I'm keeping it.

Solution 2:

Here is a more simple solution, withouth jquery:

onclick="var self = this;setTimeout(function() {self.select();}, 0);"

Solution 3:

I don't no why this behavior happens, but this hack works:

// CODE FROM GWT
TexBox.addFocusHandler(new FocusHandler()
{
  publicvoidonFocus(FocusEvent event) {
    Timer timer = new Timer() { 
      publicvoidrun() { 
        TexBox.setSelectionRange(0, 0);
      }
    }; 
    timer.schedule(10); // WAIT 1 MILLISECOND :)
  }
}

while writing the event handler, just wait for a moment before setting up the selection to 0;

Solution 4:

Another option is:

var selectOnFocus = function (element) {
    if ($.browser.webkit) {
        element.click(function () {
            if ($(this).is(":focus")) {
                this.select();
            }
        });
    } else {
        element.focus(function () {
            this.select();
        });
    }
};