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.
Problema
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.
<html>
<head>
<script type="text/javascript">
addEventListener('load',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>
</head>
<body>
<input type="text" id="text1" name="text1" size="30">
<br>
<input type="text" id="text2" name="text2" size="30">
</body>
</html>
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';
}
No hay comentarios.:
Publicar un comentario