Emulador móvil de Google Chrome: cómo mostrar el teclado en pantalla

95

Estoy depurando una versión móvil de nuestro sitio web a través de la herramienta Emulación móvil de Chrome, pero no puedo averiguar cómo hacer que aparezca un teclado en pantalla al seleccionar un campo de texto.

He hecho clic en el cuadro de texto, pero no aparece ningún teclado. Si hago esto en un dispositivo móvil, el método de entrada predeterminado (teclado) aparece y me permite escribir.

¿Hay alguna forma de replicar esto?

google-chrome mobile google-chrome-devtools Aaron Hellman
fuente

Respuestas:

150

Las herramientas para desarrolladores de Chrome tienen soporte limitado para emular diferentes estados de dispositivos:

  • IU del navegador predeterminado
  • Con barra de navegación de Chrome
  • Con teclado abierto

Según la documentación , dicha función solo está disponible cuando se emulan "dispositivos compatibles como el Nexus 5X" .

La lista completa de dispositivos emulados que admiten esta función se puede encontrar en Chromium devtools-frontend source-code ( espejo en GitHub ). Actualmente, solo es compatible con:

  • Nexus 5
  • Nexus 5X

Tenga en cuenta que el teclado emulado y la barra de navegación son solo imágenes estáticas (como puede ver en el directorio del código fuente) y no contienen ningún comportamiento interactivo. Es una forma suficientemente buena de simular el tamaño de la pantalla, pero no es una emulación perfecta.

Captura de pantalla de las herramientas para desarrolladores de Chrome

Denilson Sá Maia
fuente
Esto funciona casi a la perfección. El teclado no usa la ubicación de mi cursor y, en su lugar, está predeterminado en la barra de navegación de la página web, pero la compresión de la página funciona lo suficientemente bien. - Gracias
Aaron Hellman
19
Tenga en cuenta que esto todavía no modela el comportamiento del teclado (no muestra el teclado al seleccionar una entrada, no ajusta la posición de desplazamiento).
dlsso
18
Esto parece haberse eliminado en Chrome 68+ :( No, me habría ayudado a depurar el error de demora del corrector ortográfico que estoy tratando de corregir.
Ray Foss
4
Esto está desaprobado. El teclado virtual no es más compatible. developers.google.com/web/tools/chrome-devtools/device-mode/…
Rafael S. Fijalkowski
7
Im utilizando v79 cromo y puede confirmar que el teclado está disponible para Nexus 5s
Marcin
16

Lo más cerca que he estado es usando la extensión de teclado virtual de: "Teclado virtual de Chrome"

Nota: tuve que configurarlo para usar los eventos táctiles cuando lo usaba con una aplicación Sencha Touch en la que estaba trabajando.

Hay varios otros, así que busque "teclado virtual" en el área de extensiones de Chrome y elija lo que desee.

AnthonyVO
fuente
1
¡Trabajos! No es exactamente lo mismo que un teclado predeterminado, pero se ve muy bien. ¡Gracias!
Aaron Hellman
Este es ahora un enlace muerto, lo cual es una gran lástima. ¡Exactamente lo que necesito también! Grr argh.
JPollock
1
Esta pregunta es lo suficientemente cercana: stackoverflow.com/questions/38386215/…
JPollock
1
@BryanRayner, bueno cuando los enlaces resucitan. Redirección agregada.
AnthonyVO