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();
});

Effectively, Webkit[Chrome/Safafi] does not select all text in a field upon Focus. This is a known bug with a workaround as below. THIS supplied workaround using jquery works when the focus happens via mouse click:

$('#out').focus(function () {
    $('#out').select().mouseup(function (e) {
        e.preventDefault();
        $(this).unbind("mouseup");
    });
});

The problem: this workaround does not work when the field is focused by hitting the tab key (when a field prior to it is in focus). The cursor appears at the beginning of the field, and no text is selected. I tried a few things, but can't massage this workaround into working.

Much appreciated - James

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();
});

Effectively, Webkit[Chrome/Safafi] does not select all text in a field upon Focus. This is a known bug with a workaround as below. THIS supplied workaround using jquery works when the focus happens via mouse click:

$('#out').focus(function () {
    $('#out').select().mouseup(function (e) {
        e.preventDefault();
        $(this).unbind("mouseup");
    });
});

The problem: this workaround does not work when the field is focused by hitting the tab key (when a field prior to it is in focus). The cursor appears at the beginning of the field, and no text is selected. I tried a few things, but can't massage this workaround into working.

Much appreciated - James

• javascript
• jquery
• google-chrome
• safari
• webkit

• tabbing is doing the selection and working for me in chrome. What is the problem exactly. – Hussein Commented Mar 8, 2011 at 2:58
• let me try it in windows chrome and safari.... – James V Commented Mar 8, 2011 at 3:17
• it seems to be some other javascript in my app that is causing this workaround not to work when the field is tabbed into .. so weird.. disabling stuff one by one to figure it out now. – James V Commented Mar 8, 2011 at 3:30

4 Answers 4

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/~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);
    });
    function texty_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.

Here is a more simple solution, withouth jquery:

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

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

// CODE FROM GWT
TexBox.addFocusHandler(new FocusHandler()
{
  public void onFocus(FocusEvent event) {
    Timer timer = new Timer() { 
      public void run() { 
        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;

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();
        });
    }
};