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

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

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

Источник

10 ответов

Решение
setSelectionRange(0, 9999);

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

Источник

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

// t is the input field
setTimeout(function() {
    t.setSelectionRange(0, 9999);
}, 1);
Источник

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

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

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

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

Ваша лучшая ставка может быть отчет об ошибке с Apple.

Источник

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

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

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

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

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

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

делает трюк.

Matt

Источник

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

Источник

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

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

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

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

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

Источник

Что-то вроде следующего работает для меня на 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>

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

Источник

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

Источник
Другие вопросы по тегам