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í:
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:
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:
