jquery - Chrome 中文本框上的点击和焦点事件的顺序是否错误？

Question

我喜欢在获得焦点时选择文本框的值，因此我的 Site.Master 中有以下 javascript：

$("input:text").focus(function(){ $(this).select(); }

这（在 jsfiddle http://jsfiddle.net/8xVck/中尝试）在 IE 和 Firefox 中运行良好，但由于某种原因在 Chrome 中，当您单击文本框时，您可以立即看到它选择所有文本，然后它取消选择它并将光标放在您单击的位置。

我认为这是因为在其他浏览器中click事件是在事件之前引发的focus，而在 Chrome 中它是相反的？

谁能想到在 Chrome 中实现我的目标的方法？

Answer 1

只需阻止默认mouseup()事件，您就会得到预期的结果，例如：

$(function () {
    $("input:text").focus(function () {
        $(this).select();
    });

    $("input:text").mouseup(function (e) {
        e.preventDefault();
    });
});

小提琴

我们在mouseup()这里阻止默认事件而不是click()事件，因为事件的执行顺序如下：

1. 重点
2. mouseup
3. 点击

这是演示这一点的FIDDLE。

Answer 2

我认为这是因为在其他浏览器中click事件是在事件之前引发的focus，而在 Chrome 中它是相反的？

不要假设，测试。（同样的事情发生在 Firefox 中，顺便说一句。）

您可以使用以下方法解决该问题setTimeout：Fiddle

$("input:text").focus(function() {
    var $this = $(this);
    setTimeout(function(){
        $this.select()
    }, 0);
});

Answer 3

Chrome 反应的一小段时间有很大帮助：http: //jsfiddle.net/8xVck/2/

$(function(){
    $("input:text").focus(function(){ 
        var that = $(this);
        window.setTimeout(function(){
            that.select();
        }, 13);
    });
});

Answer 4

这在 chrome 28 中对我有用

JavaScript：

$(function(){
    $("input:text").focus(function(){ 
        var $this = $(this);
        setTimeout(function () {
           $this.select();
        }, 0);
    });
});

HTML：

<input type="text" value="select all of me!" />

更新小提琴