 |
Eventos onFocus y onBlur
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.
Definición y uso de onfocus
La propiedad onfocus devuelve un manejador de eventos para el evento onFocus en el elemento actual. El evento onfocus ocurre cuando un elemento se enfoca un <input>, <select> y <a>.
El evento onfocus se usa con mayor frecuencia con <input>, <select> y <a>.
El evento focus se dispara cuando el usuario establece el foco en el elemento. Este evento es compatible con TODOS los elementos HTML EXCEPTO los elementos HTML : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title>
Consejo: el evento onfocus es lo opuesto al evento onblur .
Consejo: el evento onfocus es similar al evento onfocusin . La principal diferencia es que el evento onfocus no burbujea. Por lo tanto, si desea saber si un elemento o su hijo obtiene el foco, puede usar el evento onfocusin. Sin embargo, puede lograr esto utilizando el parámetro opcional useCapture del método addEventListener () para el evento onfocus.
Definición y uso de onblur
<html>
<body>
<p>Cuando ingresa al campo de entrada (secundario de FORM), se activa una función que establece el color de fondo en amarillo. Cuando abandona el campo de entrada, se activa una función que elimina el color de fondo..</p>
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "red";
}
</script>
</body>
</html>