Listado completo de tutoriales

Eventos onFocus y onBlur

El evento onFocus se dispara cuando el objeto toma foco y el evento onBlur cuando el objeto pierde el foco.

Ejemplo: Implementar un formulario que solicite la carga del nombre y la edad de una persona. Cuando el control tome foco borrar el contenido actual. Mostrar en las propiedades value de los controles text los mensajes "nombre" y "mail" respectivamente.

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <form>
        <input type="text" id="nombre" onFocus="vaciar(this)" value="nombre"><br>
        <input type="text" id="edad" onFocus="vaciar(this)" value="mail">
        <br>
        <input type="button" value="Confirmar">

        <script>
            function vaciar(control) {
                control.value = '';
            }

            function verificarEntrada(control) {
                alert('ingreso:' + control.value);
            }
        </script>

    </form>
</body>

</html>

A cada control de tipo TEXT le inicializamos el eventos onFocus. También cargamos las propiedad value para mostrar un texto dentro del control. Le indicamos, para el evento onFocus la función vaciar, pasando como parámetro la palabra clave this que significa la dirección del objeto que emitió el evento. En la función propiamente dicha, accedemos a la propiedad value y borramos su contenido. Esto nos permite definir una única función para vaciar los dos controles.

Retornar