42 - Evento blur (DOM)
Problema:
Disponer dos controles de tipo text con algún contenido. Fijar 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
estilos.css
funciones.js
Ejecución de la página
<!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>
#text1, #text2 { color: #00f; }
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' }
No tiene disponible el navegador la capacidad de iframe
Retornar