El evento focus se dispara cuando se activa el control o toma foco y el evento blur se dispara cuando pierde el foco el control. Podemos capturar el evento focus y blur de un control de tipo text, textarea, button, checkbox, file, password, radio, reset y submit.

Focus El evento focus ocurre cuando un elemento se enfoca. El evento onfocus se usa con mayor frecuencia con <input>, <select> y <a> Se aplica en todos los elementos HTML, EXCEPTO: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title> Consejo: el evento onfocus es lo opuesto al evento onblur . El evento onfocus es similar al evento onfocusin . La principal diferencia es que el evento onfocus no burbujea. Por lo tanto, si desea saber si un elemento o su hijo obtiene el foco, puede usar el evento onfocusin. Sin embargo, puede lograr esto utilizando el parámetro opcional useCapture del método addEventListener () para el evento onfocus.
Blur El método blur () se usa para quitar el foco de un elemento. Consejo: utilice el método focus () para enfocar un elemento.

Confeccionar un formulario que muestre dos controles de tipo text. El que está con foco mostrar su texto de color rojo y aquel que no está seleccionado el texto se debe mostrar de color negro.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<input type="text" id="text1" name="text1" size="30">
<br>
<input type="text" id="text2" name="text2" size="30">

<script>
addEventListener('DOMContentLoaded',inicio,false);

function inicio()
{
document.getElementById('text1').addEventListener('focus',tomarfoco1,false);
document.getElementById('text2').addEventListener('focus',tomarfoco2,false);
document.getElementById('text1').addEventListener('blur',perderfoco1,false);
document.getElementById('text2').addEventListener('blur',perderfoco2,false);
}

function tomarfoco1()
{
document.getElementById('text1').style.color='#ff0000';
}

function tomarfoco2()
{
document.getElementById('text2').style.color='#ff0000';
}

function perderfoco1()
{
document.getElementById('text1').style.color='#000000';
}

function perderfoco2()
{
document.getElementById('text2').style.color='#000000';
}
</script>

</body>
</html>

Ver ejemplo anterior

En la función inicio registramos los evento fucus y blur para los dos controles text:

function inicio()
{
document.getElementById('text1').addEventListener('focus',tomarfoco1,false);
document.getElementById('text2').addEventListener('focus',tomarfoco2,false);
document.getElementById('text1').addEventListener('blur',perderfoco1,false);
document.getElementById('text2').addEventListener('blur',perderfoco2,false);
}

En los métodos tomarfoco1 y tomarfoco2 activamos el color rojo para el texto del control text:

function tomarfoco1()
{
document.getElementById('text1').style.color='#ff0000';
}

function tomarfoco2()
{
document.getElementById('text2').style.color='#ff0000';
}

En los métodos perderfoco1 y perderfoco2 procedemos a activar el color negro para los controles text:

function perderfoco1()
{
document.getElementById('text1').style.color='#000000'; }

function perderfoco2() {
document.getElementById('text2').style.color='#000000';
}