Как программно выделить текст поля ввода на устройствах iOS, например iPhone, iPad с мобильным Safari?
Обычно достаточно вызвать .select()функцию для <input ... />элемента, но на этих устройствах это не работает. Курсор просто остается в конце существующей записи без выбора.
Ответы:
input.setSelectionRange(0, 9999);
.focus()ввод перед вызовом input.setSelectionRange. Если вы слушаете focusсобытие на входе, не забудьте учесть бесконечный цикл.
readonlyатрибут.
setSelectionRange()в focusобработчике работает , когда вы вызываете .focus()программны, но если вы вручную нажмите на ввод текста на прошивке, выбор не бывает. Достаточно сказать, что все, что вам нужно сделать, это вызвать setSelectionRange()в течение setTimeout, равного 0, и он будет работать, как ожидалось, независимо от того, что вызывает фокус.
У меня ничего в этой ветке не работает, вот что работает на моем iPad:
// t is the input field
setTimeout(function() {
t.setSelectionRange(0, 9999);
}, 1);
Трудно доказать отрицательный результат, но мои исследования показывают, что это ошибка Mobile Safari.
Обратите внимание, что focus () более или менее работает - хотя для успешного выполнения может потребоваться более одного нажатия, и в этом нет необходимости, если вы пытаетесь ответить на нажатие пользователя на соответствующее поле, поскольку само нажатие даст поле фокус. К сожалению, выберите () является просто неработоспособность Mobile Safari.
Лучшим вариантом может быть отчет об ошибке в Apple .
См. Эту скрипку : (введите текст в поле ввода и нажмите «Выбрать текст»)
Он выбирает текст в поле ввода на моем iPod (5-го поколения iOS6.0.1), открывает клавиатуру, а также показывает меню «Вырезать / Копировать / Предложить ...»
Использование простого javascript. Не пробовал с jQuery
document.getElementById("p1").selectionStart = 0
document.getElementById("p1").selectionEnd = 999
Обратите внимание, что число 999 - это всего лишь образец. Вы должны установить эти числа на количество символов, которые вы хотите выбрать.
ОБНОВИТЬ:
С последними двумя вы можете поэкспериментировать, запустив событие щелчка на inputэлементе.
ОБНОВЛЕНИЕ: (07-10-2013)
ОБНОВЛЕНИЕ: (14-11-2013)
.selectionStartи .selectionEnd делает работу.ОБНОВИТЬ: (15-01-2015)
<input/>, iPad думал, что я нажимаю на панель «CSS» jsfiddle (где все, что я набираю, было невидимым). Как только я направил кран на правильный<input/> , ваша кнопка «Выбрать текст» будет отлично работать на iOS-7.0.3 :-).
Извините, в моем предыдущем посте я не заметил Javascript, подразумевающего, что вам нужен ответ в Javascript.
Чтобы получить то, что вы хотите в UIWebView с помощью javascript , мне удалось собрать воедино два важных фрагмента информации, чтобы заставить их работать. Не уверен насчет мобильного браузера.
element.setSelectionRange(0,9999); делает то, что мы хотим
Событие mouseUp отменяет выделение
Таким образом (используя прототип):
input.observe ('фокус', function () {
this.setSelectionRange (0, 9999);
});
input.observe ('mouseup', function (event) {
event.stop ();
});
делает свое дело.
Мэтт
$("input").focus(function () { this.setSelectionRange(0, 9999); return false; } ).mouseup( function () { return false; });
focusinвместо focus, чтобы это работало, iOS 7
Похоже, фокус будет работать, но только при прямом вызове из собственного события. вызов фокуса с использованием чего-то вроде SetTimeout не появляется, вызывает клавиатуру. Управление клавиатурой ios очень плохое. Это не очень хорошая ситуация.
Что-то вроде следующего работает для меня на Webkit, который поставляется с Android 2.2:
function trySelect(el) {
setTimeout(function() {
try {
el.select();
} catch (e) {
}
}, 0);
}
См. Chromium Issue 32865 .
С iOS 7 на iPad единственный способ, которым я смог выполнить эту работу, заключался в том, чтобы использовать <textarea></textarea>вместо<input> поля.
например
<textarea onclick="this.setSelectionRange(0, 9999);">My text will be selected when textarea is clicked.</textarea>
Как запретить пользователю изменять текст внутри области было сложнее, так как если вы сделаете textarea только для чтения, трюк с выделением больше не будет работать.
Я сошел с ума в поисках этого решения, хотя все ваши ответы помогли ему открыть для меня еще одну банку червей.
Клиент хотел, чтобы пользователь мог щелкнуть и выбрать все , а также позволить пользователю «вкладывать» и выбирать все на iPad. (с внешней клавиатурой. Я знаю, сумасшедший ...)
Мое решение этой проблемы было переставить события. Первый фокус , а затем нажмите , затем touchstart .
$('#myFUBARid').on('focus click touchstart', function(e){
$(this).get(0).setSelectionRange(0,9999);
//$(this).css("color", "blue");
e.preventDefault();
});
Я надеюсь, что это кому-то поможет, потому что вы много раз помогали мне.