当用户关注该字段时,我正在使用此代码尝试选择该字段中的所有文本。发生的事情是,它选择了所有的一秒钟,然后它被取消选择,打字光标留在我点击的地方......
$("input[type=text]").focus(function() {
$(this).select();
});
我希望这一切都保持选中状态。
尝试使用 click
而不是 focus
。它似乎适用于鼠标和按键事件(至少在 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)
一种解决方法可能是异步调用 select(),以便它在 focus() 之后完全运行:
$("input[type=text]").focus(function() {
var save_this = $(this);
window.setTimeout (function(){
save_this.select();
},100);
});
this
有点出乎意料。我会更新代码。
我认为这是更好的解决方案。与简单地选择 onclick 事件不同,它不会阻止使用鼠标选择/编辑文本。它适用于包括 IE8 在内的主要渲染引擎。
$('input').on('focus', function (e) {
$(this)
.one('mouseup', function () {
$(this).select();
return false;
})
.select();
});
select()
似乎可行。
$('input[autofocus]').select();
会更好
这里有一些不错的答案,@user2072367 是我最喜欢的答案,但是当您通过选项卡而不是单击进行聚焦时,它会产生意想不到的结果。 (意想不到的结果:通过Tab焦点后正常选择文本,您必须再单击一次)
This fiddle 修复了这个小错误,并另外将 $(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();
});
经过仔细审查,我建议将此作为该线程中更清洁的解决方案:
$("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); });
https://i.imgur.com/JbU30dD.png
注意:我已将此解决方案更改为使用 click 而不是 mouseup,因为它稍后会在事件管道中发生,并且根据 @Jocie 的评论似乎在 Firefox 中引起了一些问题
某些浏览器会尝试在 mouseup
或 click
事件期间定位光标。这是有道理的,因为您可能希望在一个位置开始插入符号并拖动以突出显示某些文本。在您实际抬起鼠标之前,它无法指定插入符号的位置。因此,处理 focus
的函数注定会过早响应,让浏览器覆盖您的定位。
但问题是我们确实想要处理焦点事件。它让我们知道有人第一次进入该领域。在那之后,我们不想继续覆盖用户选择行为。
解决方案:
相反,在 focus
事件处理程序中,我们可以为即将触发的 click
(点击进入)和 keyup
(标签进入)事件快速附加侦听器。
注意:tab 事件的 keyup 实际上会在新的输入字段中触发,而不是之前的
我们只想触发一次事件。我们可以使用 .one("click keyup)
,但这会是 call the event handler once for each event type。相反,只要按下 mouseup 或 keyup,我们就会调用我们的函数。我们要做的第一件事是删除两者的处理程序。这样,无论我们是用标签还是鼠标输入都无关紧要。该函数应该只执行一次。
注意:大多数浏览器在 tab 事件期间自然会选择所有文本,但正如 animatedgif 指出的那样,我们仍然希望处理 keyup 事件,否则 mouseup 事件仍然会在我们进入 tab 的任何时候徘徊。我们听两者所以我们一旦我们处理了选择,就可以关闭监听器。
现在,我们可以在浏览器做出选择后调用 select()
,这样我们就可以确保覆盖默认行为。
最后,为了获得额外的保护,我们可以将 event namespaces 添加到 mouseup
和 keyup
函数中,这样 .off()
方法就不会删除任何其他可能正在运行的侦听器。
在 IE 10+、FF 28+ 和 Chrome 35+ 中测试
或者,如果您想使用 function called once
that will fire exactly once for any number of events 扩展 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();
});
});
小提琴中的演示
click
事件中的文本选择,该事件比 mouseup
更靠后。由于我们希望尽可能晚地处理选择的结束,以便我们有最大的机会覆盖浏览器,因此使用 click 而不是 mouseup 应该可以解决问题。在 FF、Chrome 和 IE 中测试。
one
不会将其剪切为“每个元素每个事件类型执行一次处理程序。它会自动关闭触发它的事件,但另一个仍然会徘徊,并且 off
无论如何都会处理这两个问题。请参阅我的问题:function that will fire exactly once for any number of events
这将完成工作并避免您无法再通过鼠标选择部分文本的问题。
$("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");
}
});
大多数这些解决方案的问题在于,当更改输入字段中的光标位置时,它们无法正常工作。
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 中对此进行了测试。
此版本适用于 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();
}
}
});
找到了一个很棒的解决方案阅读 this thread
$(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();
});
}
我总是使用 requestAnimationFrame()
来跳过内部事件后机制,这在 Firefox 中非常有效。尚未在 Chrome 中测试。
$("input[type=text]").on('focus', function() {
requestAnimationFrame(() => $(this).select());
});
我使用 FF 16.0.2 和 jquery 1.8.3,答案中的所有代码都不起作用。我使用这样的代码并工作。
$("input[type=text]").focus().select();
$("input[type=text]").on('click', function () { $(this).focus.select(); })
在用户单击框时导致焦点和选择发生,因为它在用户单击框时执行。如果没有事件处理程序,代码不会回答问题,因此会否决和评论。基本上,您得到了“选择了所有当前文本”,但没有得到“当他选择字段时”部分。
或者您可以只使用 <input onclick="select()">
完美。
var timeOutSelect;
$("input[type=text]").focus(function() {
var save_this = $(this);
clearTimeout(timeOutSelect);
timeOutSelect = window.setTimeout (function(){
save_this.select();
}, 100);
});
如果您在两个输入之间快速切换,请使用 clearTimeout 以提高安全性。 clearTimeout 清除旧超时...
与原生 JavaScript select()
配合使用效果很好。
$("input[type=text]").focus(function(event) {
event.currentTarget.select();
});
或一般来说:
$("input[type=text]")[0].select()
您可以使用简单的代码:
$('#idname').select();
<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>
$.ready
不正确。您需要向它传递一个函数以使其延迟 attr
直到文档准备好。您立即执行此操作,然后将元素集合传递给 $.ready
。
addEventListener
。
不定期副业成功案例分享