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

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

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

Ответ 2

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

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

Ответ 3

Посмотрите эту скрипту: (введите текст в поле ввода и нажмите "выбрать текст" )

Он выбирает текст в ящике ввода на моем iPod (5-й iOS6.0.1), открывает клавиатуру, а также отображает меню Cut/Copy/Suggest...

Использование простого javascript. Не пробовал это с помощью jQuery

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

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

UPDATE:

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

В течение последних двух дней вы можете поэкспериментировать, инициировав событие click на элементе 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.x.x: спасибо комментарию от Майкл Зиберт. Взято из комментария:                 Мне пришлось прислушиваться к событиям focus и click, а затем setTimeout/_. Debounce                 чтобы он работал в обоих случаях: нажмите вкладку или сфокусируйтесь с помощью табуляции

Ответ 4

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

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

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

Ответ 5

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

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

  • element.setSelectionRange(0,9999); делает то, что мы хотим

  • событие mouseUp отменяет выбор

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

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

делает трюк.

Matt

Ответ 6

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

Ответ 7

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

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

См. Chromium Проблема 32865.

Ответ 8

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

например.

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

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

Ответ 9

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

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

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

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

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

Ответ 10

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