Webkit [Chrome/Safari] javascript select on focus bug 的解决方法（在字段之间使用选项卡时）答案

【问题标题】：Workaround to Webkit[Chrome/Safari] javascript select on focus bug (when using tab between fields)Webkit [Chrome/Safari] javascript select on focus bug 的解决方法（在字段之间使用选项卡时）
【发布时间】：2011-03-08 02:36:15
【问题描述】：

这里出现了类似的问题：3380458:

当尝试使用以下 jquery 选择焦点时，它在 webkit 中不起作用：

$('#out').focus(function(){
  $('#out').select();
});

实际上，Webkit[Chrome/Safafi] 在 Focus 时不会选择字段中的所有文本。这是一个已知错误，解决方法如下。当通过鼠标单击发生焦点时，使用 jquery 提供的解决方法有效：

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

问题：当字段通过按 Tab 键获得焦点时（当它之前的字段处于焦点时），此解决方法不起作用。光标出现在字段的开头，并且没有选择任何文本。我尝试了一些方法，但无法将此解决方法推向工作。

非常感谢 - 詹姆斯

【问题讨论】：

制表符正在为我进行选择并在 chrome 中为我工作。究竟是什么问题。
让我在 windows chrome 和 safari 中尝试一下......
它似乎是我的应用程序中的其他一些 javascript 导致此解决方法在该字段被选项卡进入时不起作用.. 太奇怪了.. 禁用一些东西现在就解决了。

标签： javascript jquery google-chrome safari webkit

【解决方案1】：

问题可能源于我的布局/CSS/javascript 中的某个地方。出于某种原因，在 Chrome 中进入字段不会突出显示整个文本框。事实上，即使没有 webkit 错误解决方法，在字段中切换应该始终突出显示文本框中的内容，如 SECOND 字段中所示：

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

在任何情况下，当我在这个混乱中寻找真正的罪魁祸首时，我使用 setTimeout 作为解决方法：

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

这对于使用移动浏览器（特别是我的 iPad）还有其他好处，所以虽然它不是最优雅的解决方案，但我还是保留了它。

【讨论】：

【解决方案2】：

这是一个更简单的解决方案，没有 jquery：

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

【讨论】：

这将不利于通过TAB 键选择焦点（如问题中所述：“...点击tab键...”）

【解决方案3】：

我不知道为什么会发生这种行为，但这个 hack 有效：

// 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 :)
  }
}

在编写事件处理程序时，请稍等片刻，然后将选择设置为 0；

【讨论】：

【解决方案4】：

另一种选择是：

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

【讨论】：