jQuery的inputselect所有的焦点
我正在使用此代码尝试在用户关注该字段时select该字段中的所有文本。 会发生什么事情，它select所有的一秒钟，然后其未选中和键入光标留在我点击…
$("input[type=text]").focus(function() { $(this).select(); }); 我希望这一切都保持被选中。
尝试使用click而不是focus 。 它似乎适用于鼠标和键盘事件（至less在Chrome / Mac上）：
jQuery <版本1.7：
$("input[type='text']").click(function () { $(this).select(); });
jQuery版本1.7+：
$("input[type='text']").on("click", function () { $(this).select(); });
这里是一个演示
我认为会发生什么事情是这样的：
focus() UI tasks related to pre-focus callbacks select() UI tasks related to focus (which unselect again)
解决方法可能是asynchronous调用select（），以便在focus（）之后完全运行：
$("input[type=text]").focus(function() { var save_this = $(this); window.setTimeout (function(){ save_this.select(); },100); });
我认为这是更好的解决scheme。 与在onclick事件中简单select不同，它不会阻止用鼠标select/编辑文本。 它适用于主要的渲染引擎，包括IE8。
$('input').on('focus', function (e) { $(this) .one('mouseup', function () { $(this).select(); return false; }) .select(); });
这里有一些不错的答案，@ user2072367是我最喜欢的，但是当你通过标签而不是通过点击来关注时，它会有一个意想不到的结果。 （意外结果：通过标签焦点select文本后，必须再单击一次）
这个小提琴修复了这个小错误，并将$（this）存储在一个variables中，以避免多余的DOMselect。 一探究竟！ （：
testing在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(); });
经过仔细的审查，我提出这是一个更干净的解决scheme，在这个线程内：
$("input").focus(function(){ $(this).on("click.a keyup.a", function(e){ $(this).off("click.a keyup.a").select(); }); });
演示在jsFiddle
问题：
这里有一点解释：
首先，让我们看看鼠标或标签栏中事件的顺序。
我们可以logging所有这样的相关事件：
$("input").on("mousedown focus mouseup click blur keydown keypress keyup change", function(e) { console.log(e.type); });
注意 ：我已经改变了这个解决scheme，使用
click而不是mouseup因为它事后在事件pipe道中发生，并且似乎在firefox中引起了一些问题，如@ Jocie的评论
某些浏览器尝试在mouseup或click事件期间定位光标。 这是有道理的，因为你可能想在一个位置开始脱字符并拖动来突出显示一些文本。 除非你真的拿起鼠标，否则它不能指定脱字符的位置。 所以处理focus函数会被命名为响应太早，导致浏览器忽略您的定位。
但蹭的是我们真的想要处理重点事件。 它让我们知道有人第一次进入这个领域。 在那之后，我们不想继续覆盖用户select行为。
解决scheme：
相反，在focus事件处理程序中，我们可以快速附加侦听器来click即将触发的事件（点击）和keyup （tab in）事件。
注意 ：选项卡事件的键控实际上将在新的input字段中触发，而不是在前一个字段中触发
我们只想发一次事件。 我们可以使用.one("click keyup) ，但是这会为每个事件types调用一次事件处理函数，而只要按下鼠标或键盘上的键，我们就会调用我们的函数。是删除这两个处理程序。这样，我们是否标签或embedded无关紧要。函数应该只执行一次。
注意 ：大多数浏览器在标签页事件中自然select所有的文本，但是像animatedgif指出的那样 ，我们仍然想要处理这个
keyup事件，否则mouseup事件在任何时候都会被拖延。可以在我们处理完select后立即closures监听器。
现在，我们可以在浏览器做出select之后调用select() ，所以我们确定覆盖默认的行为。
最后，为了获得额外的保护，我们可以将事件名称空间添加到mouseup和keyup函数中，这样.off()方法不会删除任何可能正在使用的其他侦听器。
testingIE 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(); }); });
在小提琴演示
这将做的工作，并避免您不能再通过鼠标select部分文本的问题。
$("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"); } });
大多数解决scheme的问题在于，在input字段中更改光标位置时，它们无法正常工作。
onmouseup事件会改变在onfocus之后触发的字段内的光标位置（至less在Chrome和FF中）。 如果无条件丢弃鼠标，那么用户不能用鼠标改变光标的位置。
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默认行为。 它适用于这些情况：
- 当字段没有被聚焦时，点击
- 当字段有焦点时点击
- 扎进田里
我已经在Chrome 31，FF 26和IE 11中testing过了。
这个版本在ios上工作，也修复了windows chrome上的标准拖动select
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(); } } });
find一个很棒的解决scheme阅读这个线程
$(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); }); } });
我来自2016年下半年，这个代码只适用于最新版本的jquery（本例中是jquery-2.1.3.js）。
if ($(element).is("input")) { $(element).focus(function () { $(element).select(); }); }
我使用FF 16.0.2和jquery 1.8.3，答案中的所有代码都不起作用。
我使用这样的代码和工作。
$("input[type=text]").focus().select();
或者你可以使用<input onclick="select()"> Works perfect。
var timeOutSelect; $("input[type=text]").focus(function() { var save_this = $(this); clearTimeout(timeOutSelect); timeOutSelect = window.setTimeout (function(){ save_this.select(); }, 100); });
如果在两个input之间快速切换，请使用clearTimeout以获得更高的安全性。clearTimeout清除旧的超时…
<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>
你可以使用简单的代码：
$('#idname').select();
