Controle total com a API VirtualKeyboard

Thomas Steiner

Dispositivos como tablets ou smartphones geralmente têm um teclado virtual para digitar texto. Ao contrário de um teclado físico, que está sempre presente e é sempre igual, um teclado virtual aparece e desaparece, dependendo das ações do usuário, às quais também pode se adaptar dinamicamente, por exemplo, com base no atributo inputmode.

Essa flexibilidade tem o preço de que o mecanismo de layout do navegador precisa ser informado sobre a presença do teclado virtual e, possivelmente, ajustar o layout do documento para compensar. Por exemplo, um campo de entrada em que o usuário está prestes a digitar pode ser obscurecido pelo teclado virtual, então o navegador precisa rolar para que ele apareça.

Tradicionalmente, os navegadores lidam com esse desafio por conta própria, mas aplicativos mais complexos podem exigir mais controle sobre o comportamento do navegador. Por exemplo, dispositivos móveis com várias telas em que a abordagem tradicional resultaria em espaço "desperdiçado" se o teclado virtual fosse mostrado em apenas um segmento da tela, mas em que a janela de visualização disponível é reduzida nas duas telas. A imagem abaixo mostra como a API VirtualKeyboard pode ser usada para otimizar o layout do documento de forma dinâmica para compensar a presença do teclado virtual.