El evento blur se dispara cuando pierde el foco el control.
Podemos capturar el evento blur de un control de tipo text, textarea, button, checkbox, file, password, radio, reset, submit.
Para probar su funcionamiento dispondremos dos controles de tipo text con algún contenido. Fijaremos de color azul su fuente. Al tomar foco el control cambiará a color rojo y al perder el foco volverá a color azul.
pagina.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<form action="#" method="post">
<input type="text" name="text1" id="text1" value="Hola" size="20">
<br>
<input type="text" name="text2" id="text2" value="Hola" size="20">
</form>
<script src="funciones.js"></script>
</body>
</html>
estilos.css
#text1,
#text2 {
color: #00f;
}
funciones.js
document.getElementById('text1').addEventListener('focus', tomarFoco)
document.getElementById('text2').addEventListener('focus', tomarFoco)
document.getElementById('text1').addEventListener('blur', perderFoco)
document.getElementById('text2').addEventListener('blur', perderFoco)
function tomarFoco(e) {
e.target.style.color = '#f00'
}
function perderFoco(e) {
e.target.style.color = '#00f'
}
Es importante notar que a cada control de tipo text le definimos dos eventos a capturar:
document.getElementById('text1').addEventListener('focus', tomarFoco)
document.getElementById('text2').addEventListener('focus', tomarFoco)
document.getElementById('text1').addEventListener('blur', perderFoco)
document.getElementById('text2').addEventListener('blur', perderFoco)
Los algoritmos de tomarFoco y perderFoco son similares (cambiamos el color de la letra del control que emitió el evento):
function tomarFoco(e) {
e.target.style.color = '#f00'
}
function perderFoco(e) {
e.target.style.color = '#00f'
}