Eventos onFocus y onBlur

Lección 37: Eventos onFocus y onBlur

Vamos a ver dos eventos importantes a la hora de crear algo interesante en javascript.

El evento onFocus se ejecuta cuando un componente de nuestra web toma el foco, y el onBlur justamente lo contrario, se ejecuta cuando el componente pierde el foco. En el ejemplo que veremos se va a entender de forma fácil.

Creamos un campo de texto, y haremos que cuando tome el foco, el campo de texto borre el texto que tenga escrito, y que cuando pierda el foco el campo de texto, nos lo avise con una ventana javascript.


La parte de HTML quedaría así:

37-1

Ambas funciones reciben como parámetro al componente en cuestión que vamos a utilizar. Por eso se le pasa "this", que significa "este" en inglés. Es decir, que le pasamos por parámetro ese mismo campo de texto "nombre".

Ya solo nos queda ver la parte javascript:

37-2

Cuando el evento toma el foco, queremos ejecutar la función vaciar, que simplemente pone el valor del campo de texto vacío. Para acceder al campo de texto, utilizamos la variable que recibimos por parámetro, en este caso "control".

control.value sería el valor del campo de texto, que igualaremos a ' '. O sea, ponerlo vacío.

Y la función verificarEntrada es muy sencilla, simplemente mostramos por pantalla que el componente ha perdido el foco.


Con este ejemplo tan simple entenderemos como funcionan estos 2 eventos. Son útiles para darle dinamismo a nuestra página web.

El ejemplo puedes verlo/descargarlo aquí: Eventos onFocus y onBlur


Veamos un video del funcionamiento del programa:

 

Eventos OnFocus y OnBlur

Daniel Pozo Chichon

Técnico en Desarrollo de Aplicaciones Informáticas (Grado superior)

Contenidos que te pueden interesar
Este sitio usa cookies para personalizar el contenido y los anuncios, ofrecer funciones de redes sociales y analizar el tráfico. Ninguna cookie será instalada a menos que se desplace exprésamente más de 400px. Leer nuestra Política de Privacidad y Política de Cookies. Las acepto | No quiero aprender cursos gratis. Sácame