Evento de enfoque
Ejemplo
Ejecute un JavaScript cuando un campo de entrada obtenga el foco:
<input type="text"
onfocus="myFunction()">
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
El evento onfocus ocurre cuando un elemento recibe el foco.
El evento onfocus se usa con mayor frecuencia con <input>, <select> y <a>.
Sugerencia: El evento onfocus es lo opuesto al evento onblur .
Sugerencia: El evento onfocus es similar al evento onfocusin . La principal diferencia es que el evento onfocus no burbujea. Por lo tanto, si desea averiguar si un elemento o su hijo recibe el foco, puede usar el evento onfocusin. Sin embargo, puede lograr esto usando el parámetro opcional useCapture del método addEventListener() para el evento onfocus.
Compatibilidad con navegador
Event | |||||
---|---|---|---|---|---|
onfocus | Yes | Yes | Yes | Yes | Yes |
Sintaxis
En HTML:
<element onfocus="myScript">
En JavaScript:
object.onfocus = function(){myScript};
En JavaScript, usando el método addEventListener():
object.addEventListener("focus", myScript);
Nota: el método addEventListener() no es compatible con Internet Explorer 8 y versiones anteriores.
Detalles técnicos
Burbujas: | No |
---|---|
Cancelable: | No |
Tipo de evento: | Evento de enfoque |
Etiquetas HTML compatibles: | TODOS los elementos HTML, EXCEPTO: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title> |
Versión DOM: | Eventos de nivel 2 |
Más ejemplos
Ejemplo
Usando "onfocus" junto con el evento "onblur":
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Ejemplo
Borrar campo de entrada en foco:
<!-- When the input field gets focus, replace its current value with an
empty string -->
<input type="text" onfocus="this.value=''" value="Blabla">
Ejemplo
Delegación de eventos: establecer el parámetro useCapture de addEventListener() en verdadero:
<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 = "";
}
</script>
Ejemplo
Delegación de eventos: utilizando el evento focusin (no compatible con Firefox):
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>