Quitar el foco de un elemento

El evento onBlur

Si revisamos los eventos Javascript que se pueden producir en un navegador comprobamos que existe el evento onBlur. El evento onBlur se produce cuando se pierde el foco sobre algún elemento. Es decir, si por ejemplo estamos en un campo de un formulario y nos movemos a otro campo, en ese momento, el campo del formulario lanza el evento onBlur.

Capturar el evento y ejecutar código

Una vez que se produce el evento onBlur, podemos capturarle y ejecutar el código que necesitemos. En este caso lo que vamos a hacer, vía Javascript, es quitar el foco de un elemento.

En este caso lo que vamos a hacer es ejecutar el método .blur() sobre el elemento en el que tengamos el foco.

elemento.blur();

Acceder al elemento con getElementById

Para acceder al elemento sobre el que queremos quitar el foco podemos utilizar el método .getElementById().

document.getElementById('idelemento').blur();

Crear la función QuitarFoco

Solo nos quedará el lanzar este código desde algún sitio. Para ello lo ponemos dentro de un método que se llame QuitarFoco.

function QuitarFoco() {
  document.getElementById('idelemento').blur();
}

Llamar la función desde un botón

Y los lanzaremos desde un botón, en su evento onClick:

<button onclick="QuitarFoco()">Quitar Foco</button>

Una de las cosas que nos tenemos que asegurarnos es que el campo sobre el que queramos quitar el foco, tiene el cursor sobre el. :-)