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>
        document.getElementById('text1').addEventListener('focus', tomarfoco1);
        document.getElementById('text2').addEventListener('focus', tomarfoco2);
        document.getElementById('text1').addEventListener('blur', perderfoco1);
        document.getElementById('text2').addEventListener('blur', perderfoco2);

        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>

Registramos los evento fucus y blur para los dos controles text:

        document.getElementById('text1').addEventListener('focus', tomarfoco1);
        document.getElementById('text2').addEventListener('focus', tomarfoco2);
        document.getElementById('text1').addEventListener('blur', perderfoco1);
        document.getElementById('text2').addEventListener('blur', perderfoco2);

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