Eventos: focus y blur

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';
  }

Retornar