Webkit [Chrome/Safari] JavaScript选择焦点错误的解决方法(在字段之间使用制表符时) [英] Workaround to Webkit[Chrome/Safari] javascript select on focus bug (when using tab between fields)

问题描述

一个类似的问题出现在这里: 3380458 :

a similar issue appeared here: 3380458:

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

When attempting to select on focus using the following jquery, it does not work in webkit:

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

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

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

问题:当通过按Tab键使字段聚焦时(该字段位于焦点之前时)，此解决方法不起作用.光标出现在该字段的开头，并且未选择任何文本.我尝试了几件事，但无法将这种解决方法付诸实践.

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.

非常感谢-詹姆斯

推荐答案

问题可能出在我的layout/CSS/javascript中.出于某些原因，在Chrome浏览器中切换字段不会突出显示整个文本框.实际上，即使没有webkit错误的解决方法，进入该字段也应始终突出显示文本框中的内容，如在SECOND字段中所示:

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

无论如何，当我在这个混乱中搜索真正的罪魁祸首时，我使用setTimeout作为解决方法:

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

这与移动浏览器(在我的情况下尤其是iPad)一起使用还有其他好处，因此尽管它不是最优雅的解决方案，但我会保留它.

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.

这篇关于Webkit [Chrome/Safari] JavaScript选择焦点错误的解决方法(在字段之间使用制表符时)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！