Émulateur mobile Google Chrome: comment afficher sur le clavier à l'écran

94

Je débogue une version mobile de notre site Web via l'outil d'émulation mobile de Chrome, mais je ne parviens pas à comprendre comment faire apparaître un clavier à l'écran lors de la sélection d'un champ de texte.

J'ai cliqué sur la zone de texte, mais aucun clavier n'apparaît. Si je fais cela sur un appareil mobile, la méthode de saisie par défaut (clavier) apparaît et me permet de taper.

Existe-t-il un moyen de reproduire cela?

google-chrome mobile google-chrome-devtools Aaron Hellman
la source

Réponses:

148

Les outils de développement Chrome ont une prise en charge limitée pour émuler différents états de l'appareil:

  • Interface utilisateur du navigateur par défaut
  • Avec la barre de navigation Chrome
  • Avec clavier ouvert

Selon la documentation , cette fonctionnalité n'est disponible que lors de l'émulation de «périphériques pris en charge comme le Nexus 5X» .

La liste complète des périphériques émulés prenant en charge cette fonctionnalité est disponible sur Chromium devtools-frontend source-code ( miroir sur GitHub ). Actuellement, il n'est pris en charge que par:

  • Nexus 5
  • Nexus 5X

Notez que le clavier et la barre de navigation émulés ne sont que des images statiques (comme vous pouvez le voir dans le répertoire du code source) et ne contiennent aucun comportement interactif. C'est un moyen suffisant de simuler la taille de l'écran, mais ce n'est pas une émulation parfaite.

Capture d'écran des outils de développement Chrome

Denilson Sá Maia
la source
Cela fonctionne presque parfaitement. Le clavier n'utilise pas l'emplacement de mon curseur et utilise par défaut la barre de navigation de la page Web, mais la compression de la page fonctionne assez bien. - Merci
Aaron Hellman
19
Notez que cela ne modélise toujours pas le comportement du clavier (ne fait pas apparaître le clavier lors de la sélection d'une entrée, ne règle pas la position de défilement).
dlsso le
18
Cela semble avoir été supprimé dans Chrome 68+: (Non, cela m'aurait aidé à déboguer le bug du délai de vérification orthographique que j'essaie de corriger.
Ray Foss
4
Ceci est obsolète. Le clavier virtuel n'est plus pris en charge. Developers.google.com/web/tools/chrome-devtools/device-mode/…
Rafael S. Fijalkowski
7
J'utilise du chrome v79 et je peux confirmer que le clavier est disponible pour Nexus 5s
Marcin
16

Le plus proche que je suis est d'utiliser l'extension de clavier virtuel de: "Chrome Virtual Keyboard"

Remarque: j'ai dû le configurer pour utiliser les événements tactiles lors de son utilisation avec une application Sencha Touch sur laquelle je travaillais.

Il y en a un certain nombre d'autres, alors recherchez simplement "clavier virtuel" dans la zone des extensions Chrome et choisissez ce que vous aimez.

AnthonyVO
la source
1
Travaux! Pas exactement la même chose qu'un clavier par défaut mais ça a l'air génial. Merci!
Aaron Hellman
C'est maintenant un lien mort, ce qui est vraiment dommage. Exactement ce dont j'ai besoin aussi! Grr argh.
JPollock
1
Cette question est assez proche: stackoverflow.com/questions/38386215/…
JPollock
1
@BryanRayner, bien quand les liens sont ressuscités. Redirection ajoutée.
AnthonyVO