最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

jquery - Workaround to Webkit[ChromeSafari] javascript select on focus bug (when using tab between fields) - Stack Overflow

programmeradmin5浏览0评论

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

Share Improve this question edited May 23, 2017 at 12:11 CommunityBot 11 silver badge asked Mar 8, 2011 at 2:36 James VJames V 1032 silver badges9 bronze badges 3
  • 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
Add a ment  | 

4 Answers 4

Reset to default 3

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

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论