我使用这段代码尝试在用户聚焦于字段时选择字段中的所有文本。发生的事情是,它选择了所有的一秒钟,然后它被取消选择,输入光标留在我点击的地方…

$("input[type=text]").focus(function() {
   $(this).select();
});

我希望一切都能被选中。


当前回答

我认为这是更好的解决办法。不像在onclick事件中简单地选择,它不阻止用鼠标选择/编辑文本。它适用于包括IE8在内的主要渲染引擎。

$('input').on('focus', function (e) {
    $(this)
        .one('mouseup', function () {
            $(this).select();
            return false;
        })
        .select();
});

http://jsfiddle.net/25Mab/9/

其他回答

我认为这是更好的解决办法。不像在onclick事件中简单地选择,它不阻止用鼠标选择/编辑文本。它适用于包括IE8在内的主要渲染引擎。

$('input').on('focus', function (e) {
    $(this)
        .one('mouseup', function () {
            $(this).select();
            return false;
        })
        .select();
});

http://jsfiddle.net/25Mab/9/

找到一个很棒的解决方案阅读这篇文章

$(function(){

    jQuery.selectText('input:text');
    jQuery.selectText('input:password');

});

jQuery.extend( {
    selectText: function(s) { 
        $(s).live('focus',function() {
            var self = $(this);
            setTimeout(function() {self.select();}, 0);
        });
    }
});

或者你可以使用<input onclick="select()“>完美。

试着用点击代替聚焦。它似乎对鼠标和键事件都有效(至少在Chrome/Mac上):

jQuery < 1.7版本:

$("input[type='text']").click(function () {
   $(this).select();
});

jQuery 1.7+版本:

$("input[type='text']").on("click", function () {
   $(this).select();
});

这是一个演示

经过仔细的审查,我建议这是一个更干净的解决方案:

$("input").focus(function(){
    $(this).on("click.a keyup.a", function(e){      
        $(this).off("click.a keyup.a").select();
    });
});

在jsFiddle中演示

存在的问题:

这里有一点解释:

首先,让我们看一下当您将鼠标或标签移到一个字段中时事件的顺序。 我们可以像这样记录所有相关事件:

$("input").on("mousedown focus mouseup click blur keydown keypress keyup change",
              function(e) { console.log(e.type); });

注意:我已经改变了这个解决方案,使用点击而不是鼠标,因为它发生在事件管道的后面,并且根据@Jocie的评论,似乎在firefox中引起了一些问题

有些浏览器试图在鼠标悬停或单击事件期间定位光标。这是有意义的,因为您可能希望从一个位置开始插入符号,然后拖动以突出显示某些文本。在您实际抬起鼠标之前,它无法指定插入符号的位置。因此,处理焦点的函数注定会过早响应,导致浏览器覆盖你的定位。

但问题是我们确实需要处理焦点事件。它让我们知道有人第一次进入这个领域。在此之后,我们不想继续重写用户选择行为。

解决方案:

相反,在焦点事件处理程序中,我们可以快速为即将触发的click(单击进入)和keyup(标签进入)事件附加侦听器。

注意:标签事件的keyup实际上会在新的输入字段中触发,而不是在之前的输入字段中

我们只想触发事件一次。我们可以使用.one("click keyup),但这将为每种事件类型调用一次事件处理程序。相反,只要按下mouseup或keyup,我们就会调用我们的函数。我们要做的第一件事是删除两者的处理程序。这样无论我们是标签还是鼠标都不重要。该函数应该只执行一次。

注意:大多数浏览器在标签事件期间自然地选择所有文本,但正如animatedgif所指出的,我们仍然希望处理keyup事件,否则mouseup事件仍然会在我们标签进入的任何时候徘徊。我们同时听两个,所以我们可以在处理完选择后立即关闭监听器。

现在,我们可以在浏览器完成选择之后调用select(),以确保重写默认行为。

最后,为了额外的保护,我们可以向mouseup和keyup函数添加事件名称空间,这样.off()方法就不会删除任何其他可能正在使用的侦听器。


测试在IE 10+, FF 28+,和Chrome 35+


或者,如果你想用一个once函数来扩展jQuery,它会对任意数量的事件只触发一次:

$.fn.once = function (events, callback) {
    return this.each(function () {
        var myCallback = function (e) {
            callback.call(this, e);
            $(this).off(events, myCallback);
        };
        $(this).on(events, myCallback);
    });
};

然后你可以像这样进一步简化代码:

$("input").focus(function(){
    $(this).once("click keyup", function(e){      
        $(this).select();
    });
});

小提琴演示