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

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

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

input.setSelectionRange(0, 9999);

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

У меня ничего в этой ветке не работает, вот что работает на моем 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 - это всего лишь образец. Вы должны установить эти числа на количество символов, которые вы хотите выбрать.

ОБНОВИТЬ:

• 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: Благодаря комментарии от Бинки обновления , что .selectionStartи .selectionEnd делает работу.

ОБНОВИТЬ: (15-01-2015)

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

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

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

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

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

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

    input.observe ('фокус', function () {
      this.setSelectionRange (0, 9999);
    });
    input.observe ('mouseup', function (event) {
      event.stop ();
    });

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

Мэтт

Похоже, фокус будет работать, но только при прямом вызове из собственного события. вызов фокуса с использованием чего-то вроде 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();
});

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

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