Emulador de celular do Google Chrome: como mostrar o teclado na tela

94

Estou depurando uma versão móvel do nosso site por meio da ferramenta de emulação móvel do Chrome, mas não consigo descobrir como fazer um teclado na tela aparecer ao selecionar um campo de texto.

Eu cliquei na caixa de texto, mas nenhum teclado aparece. Se eu fizer isso em um dispositivo móvel, o método de entrada padrão (teclado) aparecerá e me permitirá digitar.

Existe uma maneira de replicar isso?

google-chrome mobile google-chrome-devtools Aaron Hellman
fonte

Respostas:

148

As ferramentas de desenvolvedor do Chrome têm suporte limitado para emular diferentes estados de dispositivo:

  • IU do navegador padrão
  • Com a barra de navegação do Chrome
  • Com teclado aberto

De acordo com a documentação , tal recurso só está disponível ao emular “dispositivos compatíveis como o Nexus 5X” .

A lista completa de dispositivos emulados que suportam esse recurso pode ser encontrada em Chromium devtools-frontend source-code ( mirror no GitHub ). Atualmente, só é compatível com:

  • Nexus 5
  • Nexus 5X

Observe que o teclado emulado e a barra de navegação são apenas imagens estáticas (como você pode ver no diretório do código-fonte) e não contêm nenhum comportamento interativo. É uma maneira boa o suficiente de simular o tamanho da tela, mas não é uma emulação perfeita.

Captura de tela das ferramentas de desenvolvedor do Chrome

Denilson Sá Maia
fonte
Isso funciona quase perfeitamente. O teclado não usa a localização do meu cursor e, em vez disso, o padrão é a barra de navegação da página da web, mas a compactação da página funciona bem o suficiente. - Obrigado
Aaron Hellman
19
Observe que isso ainda não modela o comportamento do teclado (não exibe o teclado ao selecionar uma entrada, não ajusta a posição de rolagem).
dlsso
18
Parece ter sido removido no Chrome 68+ :( Não, isso teria me ajudado a depurar o bug de atraso da verificação ortográfica que estou tentando corrigir.
Ray Foss
4
Isso está obsoleto. O teclado virtual não é mais compatível. developers.google.com/web/tools/chrome-devtools/device-mode/…
Rafael S. Fijalkowski
7
Estou usando o cromo v79 e posso confirmar se o teclado ESTÁ disponível para o Nexus 5s
Marcin
16

O mais próximo que cheguei foi usando a extensão de teclado virtual de: "Chrome Virtual Keyboard"

Nota: Tive que configurá-lo para usar os eventos de toque ao usá-lo com um aplicativo Sencha Touch no qual estava trabalhando.

Existem vários outros, então basta pesquisar "teclado virtual" na área de extensões do Chrome e escolher o que você gosta.

AnthonyVO
fonte
1
Trabalho! Não é exatamente o mesmo que um teclado padrão, mas parece ótimo. Obrigado!
Aaron Hellman,
Este é agora um link morto, o que é uma grande pena. Exatamente o que eu preciso também! Grr argh.
JPollock
1
Esta pergunta é próxima o suficiente: stackoverflow.com/questions/38386215/…
JPollock
1
@BryanRayner, bom quando os links são ressuscitados. Adicionado redirecionamento.
AnthonyVO