Я использую этот код, чтобы попытаться выбрать весь текст в поле, когда пользователь фокусируется на этом поле. Что происходит, он выбирает все на секунду, затем его невыбранный и курсор ввода остается там, где я нажал...
$("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);
});
Я думаю, что это лучшее решение. В отличие от простого выбора в событии onclick, это не препятствует выбору/редактированию текста с помощью мыши. Он работает с основными механизмами рендеринга, включая IE8.
$('input').on('focus', function (e) {
$(this)
.one('mouseup', function () {
$(this).select();
return false;
})
.select();
});
Здесь есть несколько достойных ответов, а @user2072367 - мой любимый, но он имеет неожиданный результат, когда вы фокусируетесь через вкладку, а не через клик. (неожиданный результат: для обычного выбора текста после фокуса с помощью вкладки вы должны нажать еще одно дополнительное время)
Эта скрипта исправляет эту небольшую ошибку и дополнительно сохраняет $(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как это происходит позже в конвейере событий и, кажется, вызывает некоторые проблемы в Firefox согласно комментарию @Jocie
Некоторые браузеры пытаются позиционировать курсор во время событий mouseup или click. Это имеет смысл, поскольку вы можете запустить каретку в одной позиции и перетащить ее, чтобы выделить текст. Он не может обозначать положение каретки, пока вы на самом деле не подняли мышь. Таким образом, функциям, которые управляют focus, суждено реагировать слишком рано, оставляя браузер переопределять ваше позиционирование.
Но проблема в том, что мы действительно хотим справиться с фокусным событием. Это позволяет нам узнать, когда кто-то вышел на поле. После этого мы не хотим продолжать переопределять поведение выбора пользователя.
Вместо этого, в обработчике событий focus мы можем быстро прикрепить прослушиватели для событий click (click in) и keyup (tab in), которые вот-вот сработают.
Примечание: Keyup события табуляции будет фактически запускаться в новом поле ввода, а не в предыдущем
Мы хотим запустить событие только один раз. Мы могли бы использовать .one("click keyup), но это вызвало бы обработчик событий один раз для каждого типа события. Вместо этого, как только будет нажата mouseup или keyup, мы вызовем нашу функцию. Первое, что мы сделаем, Удалите обработчики для обоих. Таким образом, не имеет значения, были ли мы вкладки или вставлены. Функция должна выполняться ровно один раз.
Примечание. Большинство браузеров естественным образом выделяют весь текст во время события табуляции, но, как указал animatedgif, мы по-прежнему хотим обрабатывать событие
keyup, в противном случае событиеmouseupвсе еще будет задерживаться при каждом вкладке. Мы слушаем оба, поэтому мы можно отключить слушателей, как только мы обработаем выбор.
Теперь мы можем вызвать select() после того, как браузер сделал свой выбор, поэтому мы обязательно переопределим поведение по умолчанию.
Наконец, для дополнительной защиты мы можем добавить пространства имен событий в функции mouseup и keyup чтобы метод .off() не .off() других слушателей, которые могут быть в игре.
Протестировано в IE 10+, FF 28+ и Chrome 35+
В качестве альтернативы, если вы хотите расширить jQuery с помощью функции, вызываемой once которая будет запускаться ровно один раз для любого количества событий:
$.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.
Нашел замечательное решение, читающее этот поток
$(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);
});
}
});
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();
});
}
i, используя 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()