我使用这段代码尝试在用户聚焦于字段时选择字段中的所有文本。发生的事情是,它选择了所有的一秒钟,然后它被取消选择,输入光标留在我点击的地方…
$("input[type=text]").focus(function() {
$(this).select();
});
我希望一切都能被选中。
我使用这段代码尝试在用户聚焦于字段时选择字段中的所有文本。发生的事情是,它选择了所有的一秒钟,然后它被取消选择,输入光标留在我点击的地方…
$("input[type=text]").focus(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();
});
});
小提琴演示
其他回答
这里有一些不错的答案,@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();
});
大多数这些解决方案的问题是,当在输入字段中更改光标位置时,它们不能正常工作。
onmouseup事件改变了字段中的光标位置,这是在onfocus之后触发的(至少在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"));
如果字段当前没有焦点,代码将有条件地阻止鼠标的默认行为。它适用于以下情况:
当字段未聚焦时单击 当域有焦点时单击 踏着踏着进入田野
我已经在Chrome 31、FF 26和IE 11中进行了测试。
<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>
我使用FF 16.0.2和jquery 1.8.3,所有的代码在答案不工作。 我使用这样的代码工作。
$("input[type=text]").focus().select();
我总是使用requestAnimationFrame()来跳过内部事件后机制,这在Firefox中工作完美。还没有在Chrome上测试过。
$("input[type=text]").on('focus', function() {
requestAnimationFrame(() => $(this).select());
});