当用户专注于该字段时,我正在使用此代码尝试选择字段中的所有文本。会发生什么,它选择全部一秒钟,然后取消选择,键入光标留在我点击的位置...
$("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();
});
var timeOutSelect;
$("input[type=text]").focus(function() {
var save_this = $(this);
clearTimeout(timeOutSelect);
timeOutSelect = window.setTimeout (function(){
save_this.select();
}, 100);
});
如果在两个输入之间快速切换,请使用clearTimeout以获得更高的安全性.clearTimeout清除旧的超时...
我来自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()">
作品完美。
<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>
您可以使用简单的代码:
$('#idname').select();
适用于原生JavaScript select()
。
$("input[type=text]").focus(function(event) {
event.currentTarget.select();
});
或者一般来说:
$("input[type=text]")[0].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);
});
我认为这是更好的解决方案。与简单地选择onclick事件不同,它不会阻止使用鼠标选择/编辑文本。它适用于包括IE8在内的主要渲染引擎。
$('input').on('focus', function (e) {
$(this)
.one('mouseup', function () {
$(this).select();
return false;
})
.select();
});
这里有一些不错的答案,@ user2072367是我的最爱,但是当你通过tab而不是点击进行聚焦时会产生意想不到的结果。 (意外结果:通过选项卡聚焦后正常选择文本,您必须再单击一次)
This fiddle修复了这个小bug并另外将$(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();
});
});
这里有一点解释:
首先,让我们看一下鼠标或制表符到字段时的事件顺序。 我们可以记录所有相关事件,如下所示:
$("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
事件处理程序中,我们可以快速附加将要触发的click
(单击)和keyup
(tab in)事件的侦听器。
注意:tab事件的keyup实际上是fire in the new input field, not the previous one
我们只想开火一次。我们可以使用.one("click keyup)
,但这将是call the event handler once for each event type。相反,只要按下mouseup或keyup,我们就会调用我们的函数。我们要做的第一件事就是删除两者的处理程序。这样,无论我们是选项卡还是鼠标都没关系。函数应该只执行一次。
注意:大多数浏览器在选项卡事件期间自然选择所有文本,但是作为animatedgif pointed out,我们仍然希望处理
keyup
事件,否则mouseup
事件仍然会在我们选中的任何时候挥之不去。我们听两个都可以转我们处理完选择后立即关闭听众。
现在,我们可以在浏览器进行选择后调用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();
});
});
这将完成工作并避免您无法再通过鼠标选择部分文本的问题。
$("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");
}
});
此版本适用于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();
}
}
});
大多数这些解决方案的问题在于,在输入字段中更改光标位置时它们无法正常工作。
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中测试了这个。
找到一个很棒的解决方案阅读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);
});
}
});