Esconder el teclado en una aplicación web para moviles

Hace algunas semanas atrás me topaba con un ligero problema que se relacionaba directamente con un autocomplete y esconder el teclado que despliegan los navegadores en los inputs de las aplicaciones web, inicialmente me parecía una tarea bastante complicada de resolver ya que ni javascript o algún atributo de html5 existe para esconder el teclado en pantalla.. específicamente el requerimiento decía que al seleccionar una opción de la lista que despliega un autocomplete, el teclado del móvil debería de esconderse.

Pues bien, la solución fue muy sencilla y lo único que tuve que hacer fue enviar el foco hacia otro elemento de tipo input, este último con el atributo readonly activado y claro para que pareciera un truco mágico el input que recibiría el foco no debería verse y estar oculto y ahí entré a jugar un poco con CSS, utilizando las propiedades visibility y display que por razones desconocidas no funcionaron (estoy casi seguro de que el browser móvil detecta que el elemento esta oculto y no cambia el foco.. aunque no creo que sean tan inteligentes los navegadores), en fin igual la respuesta estaba con un poco de CSS utilizando esta vez las propiedades position, left, top y z-indez.. Mucho bla bla bla, vean el ejemplo.

<input id="hideKeyboard" style="position: absolute; left: 0px; top: -20px; z-index: -1;" type="text" name="hideKeyboard" readonly="readonly" />
 
<input type="text" name="search" id="search" placeholder="Buscar" />

Entonces cuando quiero esconder el teclado, en mi caso después de haber tomado una opción del un autocomplete, mediante javascript lo único que se debe de hacer es enviar el foco hacia el elemento hideKeyboard, en jquery code se vería como esto:

$(function() {
  $('#search').autocomplete({
    select: function(event, ui) {
      // aqui el codigo para tomar el elemento seleccionado (ui.item.value)
      // ...
      // y con esto se envia el foco hacia un input desactivado lo cual hara q el teclado se esconda
      $('#hideKeyboard').focus();
    }
  });
});

Más que todo un truco, espero le sirva a alguien y si tienen una mejor forma de hacerlo, no dejen de comentar.

Jack Fiallos

Co-fundador de Qbit Mexhico, usuario de linux, Developer en tecnologías web.. Nicaragüense, centro en basketball, primer centro en rugby y pintor los fines de semana. Ortögrafo y ambientalista psicológico (de escritorio).. ese soy yo!

Si te ha servido compártelo y difunde nuestro blog..