Jquery输入select all on focus

我认为情况是这样的:

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

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

jQuery & lt;1.7版本:

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

jQuery 1.7+版本:

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

这是一个演示

i使用FF 16.0.2和jquery 1.8.3，答案中的所有代码都不工作 我使用这样的代码工作。

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

找到了一个很棒的解决方案，阅读这个线程

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

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

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

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

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

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默认行为。它适用于以下情况:

• 当字段未聚焦时单击
• 当域有焦点时单击
• 踏着踏着进入田野

我已经在Chrome 31、FF 26和IE 11中进行了测试。

这里有一些不错的答案，@user2072367是我最喜欢的，但当你通过标签而不是通过点击关注时，它会产生意想不到的结果。(意想不到的结果:通过标签聚焦后正常选择文本，必须再点击一次)

这小提琴修复了这个小错误，并额外将$(this)存储在一个变量中，以避免多余的DOM选择。点击这里查看详情！(:

在IE >中测试

$('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();
});

这个版本适用于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/

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

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

请注意:我已经改变了这个解决方案，使用click而不是mouseup，因为它发生在事件管道后面，似乎在firefox中引起了一些问题，因为@Jocie的评论

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

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

解决方案:

相反，在focus事件处理程序中，我们可以快速为将要触发的click(单击进入)和keyup(选项卡进入)事件附加侦听器。

请注意:制表符事件的键up实际上会在新的输入字段中触发，而不是之前的输入字段

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

Demo in fiddle

或者你可以直接使用<input onclick="select()"> Works perfect。

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

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

我来自2016年底，这段代码只适用于最新版本的jquery (jquery-2.1.3.js在这种情况下)。

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

你可以使用简单的代码:

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

适用于本机JavaScript select()。

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

或者概括地说:

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

我总是使用requestAnimationFrame()来跳过内部事件后机制，这在Firefox中工作完美。还没有在Chrome上测试过。

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