jQuery输入全选焦点

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

#1 楼

尝试使用click而不是focus。它似乎适用于鼠标和按键事件（至少在Chrome / Mac上有效）：

jQuery <版本1.7：

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

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

这里是一个演示

#2 楼

我认为发生了什么：

focus()
   UI tasks related to pre-focus
   callbacks
       select()
   UI tasks related to focus (which unselect again)

一种解决方法可能是异步调用select（），以便它在focus（）之后完全运行：

$("input[type=text]").focus(function() { 
    var save_this = $(this);
    window.setTimeout (function(){ 
       save_this.select(); 
    },100);
});

#3 楼

我认为这是更好的解决方案。与简单地选择onclick事件不同，它不会阻止使用鼠标选择/编辑文本。它适用于包括IE8在内的主要渲染引擎。

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

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

#4 楼

这里有一些不错的答案，@ user2072367是我最喜欢的答案，但是当您通过制表符而不是单击进行聚焦时，结果出乎意料。 （出乎意料的结果：要在通过标签聚焦后正常选择文本，您必须再单击一次）。

此小提琴修复了该小错误，并在变量中另外存储了$（this）以避免多余的DOM选择。看看这个！ （：

在IE中经过测试> 8

$('input').on('focus', function() {
    var $this = $(this)
        .one('mouseup.mouseupSelect', function() {
            $this.select();
            return false;
        })
        .one('mousedown', function() {
            // compensate for untriggered 'mouseup' caused by focus via tab
            $this.off('mouseup.mouseupSelect');
        })
        .select();
});

#5 楼

经过仔细审查，我建议将此作为该线程中的远清洁的解决方案：
<预类= “郎-JS prettyprint-越权”> $("input").focus(function(){ $(this).on("click.a keyup.a", function(e){ $(this).off("click.a keyup.a").select(); }); });
演示中的jsfiddle
的问题：
这里有一些解释：
首先，让我们看一下当您用鼠标或Tab键进入字段时的事件顺序。
我们可以像这样记录所有相关事件：

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

注意：我已更改此解决方案，以使用click而不是mouseup因为它发生在事件管道的后面，并且按照@Jocie的注释似乎在firefox中引起了一些问题。

一些浏览器尝试在mouseup或click事件期间定位光标。这很有意义，因为您可能想在一个位置开始插入符号并拖动以突出显示一些文本。在实际抬起鼠标之前，无法指定插入符的位置。因此处理focus的函数注定会过早做出响应，从而使浏览器无法覆盖您的位置。
但麻烦的是，我们确实确实想处理focus事件。它使我们知道有人第一次进入该字段。在那之后，我们不想继续覆盖用户选择行为。
解决方案：
相反，在focus事件处理程序中，我们可以快速为click（单击）和keyup附加侦听器（跳入）将要触发的事件。

注意：tab事件的键入实际上将在新的输入字段中触发，而不是先前的输入

想要一次触发该事件。我们可以使用.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();
    });
});

小提琴中的演示

#6 楼

这样就可以完成工作，并且避免了无法再用鼠标选择部分文本的问题。

$("input[type=text]").click(function() {
    if(!$(this).hasClass("selected")) {
        $(this).select();
        $(this).addClass("selected");
    }
});
$("input[type=text]").blur(function() {
    if($(this).hasClass("selected")) {
        $(this).removeClass("selected");
    }
});

#7 楼

此版本可在ios上运行，并且还修复了Windows chrome上的标准拖动选择。

var srcEvent = null;

$("input[type=text],input[type=number]")

    .mousedown(function (event) {
        srcEvent = event;
    })

    .mouseup(function (event) {
        var delta = Math.abs(event.clientX - srcEvent.clientX) 
                  + Math.abs(event.clientY - srcEvent.clientY);

        var threshold = 2;
        if (delta <= threshold) {
                   try {
                        // ios likes this but windows-chrome does not on number fields
                        $(this)[0].selectionStart = 0;
                        $(this)[0].selectionEnd = 1000;
                    } catch (e) {
                        // windows-chrome likes this
                        $(this).select();
                    }
        }
    });

http://jsfiddle.net/Zx2sc/2/

#8 楼

这些解决方案中的大多数解决方案的问题是，它们在更改输入字段内的光标位置时无法正常工作。

onmouseup事件更改了字段内的光标位置，该事件在onfocus（在至少在Chrome和FF中）。如果无条件丢弃mouseup，则用户将无法使用鼠标更改光标位置。

function selectOnFocus(input) {
    input.each(function (index, elem) {
        var jelem = $(elem);
        var ignoreNextMouseUp = false;

        jelem.mousedown(function () {
            if (document.activeElement !== elem) {
                ignoreNextMouseUp = true;
            }
        });
        jelem.mouseup(function (ev) {
            if (ignoreNextMouseUp) {
                ev.preventDefault();
                ignoreNextMouseUp = false;
            }
        });
        jelem.focus(function () {
            jelem.select();
        });
    });
}
selectOnFocus($("#myInputElement"));

如果字段当前不存在，则代码将有条件地阻止mouseup默认行为。有重点。它适用于以下情况：


字段未聚焦时单击
字段具有焦点时单击
跳入该字段

I已在Chrome 31，FF 26和IE 11中对此进行了测试。

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

#10 楼

我来自2016年末，此代码仅适用于最新版本的jquery（在这种情况下为jquery-2.1.3.js）。

if ($(element).is("input")) {
    $(element).focus(function () {
        $(element).select();
    });
}

#11 楼

我使用FF 16.0.2和jquery 1.8.3，答案中的所有代码均不起作用。
我使用类似的代码并起作用。

$("input[type=text]").focus().select();

#12 楼

var timeOutSelect;
$("input[type=text]").focus(function() { 
        var save_this = $(this);
        clearTimeout(timeOutSelect);
        timeOutSelect = window.setTimeout (function(){ 
                save_this.select(); 
        }, 100);
});

如果在两个输入之间快速切换，请使用clearTimeout以获得更高的安全性。
clearTimeout清除旧的超时...

#13 楼

非常适合与本机JavaScript select()配合使用。

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

或一般而言：

$("input[type=text]")[0].select()

#14 楼

或者您可以只使用<input onclick="select()">完美的作品。

#15 楼

您可以使用简单的代码：

$('#idname').select();

#16 楼

<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>

#17 楼

我总是使用requestAnimationFrame()跳过内部事件后机制，这在Firefox中非常有效。尚未在Chrome中进行测试。

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