Workaround to Webkit[Chrome/Safari] javascript select on focus bug (when using tab between fields)

Question

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

tabbing is doing the selection and working for me in chrome. What is the problem exactly. — Hussein, Mar 08 '11 at 02:58
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, Mar 08 '11 at 03:30

score 3 · Answer 1 · answered Nov 24 '12 at 15:34

3

Here is a more simple solution, withouth jquery:

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

answered Nov 24 '12 at 15:34

Terje

59
1

This won't facilitate the select on focus by `TAB` key (as mentioned in the question: "... hitting the tab key ...") – try-catch-finally Mar 31 '19 at 06:17

score 3 · Accepted Answer · answered Mar 08 '11 at 04:39

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

score 2 · Answer 3 · edited Jul 14 '11 at 15:01

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;

score 0 · Answer 4 · answered Aug 09 '11 at 18:57

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

Workaround to Webkit[Chrome/Safari] javascript select on focus bug (when using tab between fields)

4 Answers4

Linked