Question

此处出现类似问题：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键（当它之前的字段处于焦点时）聚焦字段时，此解决方法不起作用。光标出现在字段的开头，未选择任何文本。我尝试了一些方法，但无法按摩这种解决方法。

非常感谢 - 詹姆斯

Answer 1

问题可能源于我的layout / 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）有其他好处，所以虽然它不是最优雅的解决方案，但我保留了它。

Answer 2

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

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

Answer 3

我不知道为什么会出现这种情况，但这种黑客行为有效：

// 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;

Answer 4

另一种选择是：

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

Webkit [Chrome / Safari]的解决方法javascript选择焦点错误（在字段之间使用选项卡时）

4 个答案: