JavaScript: Esconder/mostrar o teclado virtual do smartphone

Criado: 28 de Junho, 2019 Frontend

Ao desenvolveres uma aplicação nativa tens acesso a APIs que te permitem esconder e mostrar o teclado virtual de um smartphone.

Num site uma aplicação cross mobile desenvolvida com JavaScript ainda não temos essa API, no entanto existe uma técnica simples que podes aplicar.

Mostrar o teclado virtual

Para mostrares o teclado virtual é simples.
Se o queres mostrar é porque pretendes que o utilizador escreva num elemento, então basta focares esse elemento:

document.querySelector('#idDoElemento').focus();

Caso pretendas mostrar o teclado sem focar nenhum elemento (ex: captares texto para um efeito de autocomplete/typeahead) usa a mesma abordagem que explico em baixo criando um elemento para esse efeito.

Esconder o teclado virtual

Para esconder já temos de aplicar um hack diferente que se baseia em esconder um elemento focado.

Quando focas o elemento, o teclado abre. Se esconderes o elemento alterando o CSS display para none, o browser esconde o teclado pois o elemento não está visível.

Para isso crias um elemento e adicionas-lo ao documento. Precisas de aplicar um tempo de espera antes de fazeres o foco do elemento e voltas a aplicar outro tempo de espera antes de o esconderes.

var field = document.createElement('input');
field.setAttribute('type', 'text');
document.body.appendChild(field);

// Espera antes de focares o elemento
setTimeout(() => {
  field.focus();

  // Espera antes de esconderes o elemento
  setTimeout(() => {
    field.setAttribute('style', 'display: none;');
  }, 50)
}, 50);

Como estamos a aplicar 50ms o utilizador não vai vai notar diferença.

Nota: O conteúdo deste blog é exclusivamente para ajudar e partilhar conhecimentos.
Qualquer erro que seja detetado por ti, por favor, avisa-me. Quanto melhor for o conteúdo, melhor para todos nós.

Partilhar este artigo