Эмулятор Google Chrome Mobile: как отобразить экранную клавиатуру

97

Я отлаживаю мобильную версию нашего веб-сайта с помощью инструмента мобильной эмуляции Chrome, но не могу понять, как появляется экранная клавиатура при выборе текстового поля.

Я нажал на текстовое поле, но клавиатура не появляется. Если я сделаю это на мобильном устройстве, появится метод ввода по умолчанию (клавиатура), который позволит мне печатать.

Есть ли способ повторить это?

google-chrome mobile google-chrome-devtools Аарон Хеллман
источник

Ответы:

153

Инструменты разработчика Chrome имеют ограниченную поддержку эмуляции различных состояний устройства:

  • Пользовательский интерфейс браузера по умолчанию
  • С панелью навигации Chrome
  • С открытой клавиатурой

Согласно документации , такая функция доступна только при эмуляции «поддерживаемых устройств, таких как Nexus 5X» .

Полный список эмулируемых устройств, поддерживающих эту функцию, можно найти в исходном коде Chromium devtools-frontend ( зеркало на GitHub ). В настоящее время его поддерживают только:

  • Нексус 5
  • Nexus 5X

Обратите внимание, что эмулированная клавиатура и панель навигации - это просто статические изображения (как вы можете видеть в каталоге исходного кода) и не содержат никакого интерактивного поведения. Это достаточно хороший способ имитации размера экрана, но не идеальная эмуляция.

Скриншот инструментов разработчика Chrome

Денилсон Са Майя
источник
Это работает почти идеально. Клавиатура не использует местоположение моего курсора и вместо этого по умолчанию использует панель навигации веб-страницы, но сжатие страницы работает достаточно хорошо. - Спасибо
Аарон Хеллман
20
Обратите внимание, что это по-прежнему не моделирует поведение клавиатуры (не вызывает клавиатуру при выборе ввода, не регулирует положение прокрутки).
dlsso 07
19
Похоже, это было удалено в Chrome 68+ :( Нет, это помогло бы мне отладить ошибку задержки проверки орфографии, которую я пытаюсь исправить.
Рэй Фосс
5
Это устарело. Виртуальная клавиатура больше не поддерживается. developers.google.com/web/tools/chrome-devtools/device-mode/…
Рафаэль С. Фиялковски,
8
Я использую Chrome v79 и могу подтвердить, что клавиатура доступна для Nexus 5s
Марчин
16

Самое близкое, что я пришел, - это расширение виртуальной клавиатуры от "Chrome Virtual Keyboard"

Примечание. Мне пришлось настроить его на использование событий касания при использовании с приложением Sencha Touch, над которым я работал.

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

AnthonyVO
источник
1
Работает! Не совсем то же самое, что клавиатура по умолчанию, но отлично выглядит. Благодарность!
Аарон Хеллман
Теперь это мертвая ссылка, что очень жаль. Именно то, что мне нужно! Grr argh.
JPollock
1
Этот вопрос достаточно близок: stackoverflow.com/questions/38386215/…
JPollock
1
@BryanRayner, приятно, когда оживают ссылки. Добавлен редирект.
AnthonyVO