Программный выбор текста в поле ввода на устройствах iOS (мобильный Safari)

Question

Как программно выбрать текст поля ввода на устройствах iOS, например, iPhone, iPad под управлением мобильного Safari?

Обычно достаточно вызвать функцию .select() для элемента <input ... />, но это не работает на этих устройствах. Курсор просто оставляется в конце существующей записи без выбора.

Answer 1

input.setSelectionRange(0, 9999);

https://developer.mozilla.org/en/DOM/Input.select

Answer 2

Ничто в этой теме не работает для меня, вот что работает на моем iPad:

// t is the input field
setTimeout(function() {
    t.setSelectionRange(0, 9999);
}, 1);

Answer 3

Трудно доказать отрицание, но мои исследования показывают, что это ошибка в Mobile Safari.

Обратите внимание, что focus () работает более или менее, хотя для успеха может потребоваться более одного нажатия,и в этом нет необходимости, если вы пытаетесь ответить на нажатие пользователем соответствующего поля, так как само нажатие будет фокусировать поле.К сожалению, select () является просто неработающим в Mobile Safari.

Лучшей вашей ставкой может быть сообщение об ошибке с Apple .

Answer 4

См. Эту скрипку : (введите текст в поле ввода и нажмите «выбрать текст»)

Он выбирает текст в поле ввода на моем iPod (5-го поколения iOS6.0.1), открыв клавиатуру, а также показывая меню «Вырезать / Копировать / Предложить ...»

Используя обычный JavaScript.Не пробовал это с jQuery

document.getElementById("p1").selectionStart = 0
document.getElementById("p1").selectionEnd = 999

Обратите внимание, что число 999 это просто образец.Вы должны установить эти числа на количество символов, которое хотите выбрать.

ОБНОВЛЕНИЕ:

• iPod5 - iOS6.0.1 - Работает нормально.
• iPad1 - iOS5.1.1 - выбран только текст.Нажмите выделение один раз, чтобы открыть меню «Вырезать / Копировать»
• iPad2 - iOS4.3.3 - выбран только текст.Нажмите выделение один раз, чтобы открыть меню «Вырезать / Копировать»

Для последних двух вы можете поэкспериментировать, вызвав событие щелчка на элементе input

ОБНОВЛЕНИЕ: (07-10-2013)

• iPod5 - iOS7.0.2 - Использование скрипта в ссылке: не видно набранного текста в поле ввода.Нажатие select перенаправляет меня на facebook.com (??? wtf ???), и я не знаю, что там происходит.

ОБНОВЛЕНИЕ: (14-11-2013)

• iOS 7.0.3: благодаря комментарию от binki обновлено, что .selectionStart и .selectionEnd работают.

ОБНОВЛЕНИЕ: (15-01-2015)

• iOS 8.xx: Спасибо за комментарий Michael Siebert .Взято из комментария: мне пришлось прослушивать как события focus И click, так и setTimeout / _. Debounce, чтобы заставить его работать в обоих случаях: щелкнуть ввод или фокус через табуляцию

Answer 5

Извините, в моем предыдущем посте я не заметил, что Javascript подразумевает, что вы хотите получить ответ в Javascript.

Чтобы получить то, что вы хотите в UIWebView с javascript, мне удалось собрать воедино две важные части информации, чтобы заставить ее работать.Не уверен насчет мобильного браузера.

1. element.setSelectionRange(0,9999); делает то, что нам нужно

2. событие mouseUp отменяет выделение

Таким образом (используя прототип):

    input.observe('focus', function() {
      this.setSelectionRange(0, 9999);
    });
    input.observe('mouseup', function(event) {
      event.stop();
    });

делает свое дело.

Matt

Answer 6

Похоже, фокус будет работать, но только при непосредственном вызове из нативного события.вызов фокуса с помощью чего-то вроде SetTimeout не появляется, вызывайте клавиатуру.Управление с клавиатуры IOS очень плохое.Это не очень хорошая ситуация.

Answer 7

Я сошел с ума в поисках этого решения, , в то время как все ваши ответы помогли , это открыло для меня еще одну банку червей.

Клиент хотел, чтобы пользователь мог щелкнуть и выбрать все , , а также разрешить пользователю «вкладку» и выбрать все на iPad (с внешней клавиатурой. Я знаю, сумасшедший ...)

Мое решение этой проблемы было, переставить события.Сначала Фокус , затем Нажмите , затем Touchstart .

$('#myFUBARid').on('focus click touchstart', function(e){
  $(this).get(0).setSelectionRange(0,9999);
  //$(this).css("color", "blue");
  e.preventDefault();
});

Надеюсь, это кому-нибудь поможет, ведь вы много раз помогали мне.

Answer 8

При использовании iOS 7 на iPad единственным способом, с помощью которого я смог выполнить эту работу, было использование поля <textarea></textarea> вместо <input>.

например,

<textarea onclick="this.setSelectionRange(0, 9999);">My text will be selected when textarea is clicked.</textarea>

Как запретить пользователю изменять текст внутри области было более сложным, так как вы сделали текстовую область доступной только для чтения, трюк выбора больше не будет работать.

Answer 9

Что-то вроде следующего работает для меня на Webkit, который поставляется с Android 2.2:

function trySelect(el) {
    setTimeout(function() {
        try {
            el.select();
        } catch (e) {
        }
    }, 0);
}

См. Chromium Выпуск 32865 .

Answer 10

Если вы используете браузеры, совместимые с HTML5, вы можете использовать placeholder="xxx" в своем теге input. Это должно сделать работу.