Listado completo de tutoriales

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.


<!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>

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