Ejemplo
Ejecutar un JavaScript cuando un campo de entrada obtiene foco:
<input type="text"
onfocus="myFunction()"> Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
El evento onfocus se produce cuando un elemento recibe el foco.
El evento onfocus es la más utilizada por <introducir>, <seleccione> y <a> .
Tip: El evento onfocus es lo contrario de la onBlur evento.
Consejo: El evento onfocus es similar a la onfocusin evento. La diferencia principal es que el evento onfocus no burbujea. Por lo tanto, si desea averiguar si un elemento o su hijo reciba el foco, se puede utilizar el evento onfocusin. Sin embargo, se puede lograr esto mediante el parámetro opcional de la useCapture addEventListener() método para el evento onfocus.
Soporte del navegador
| Evento | |||||
|---|---|---|---|---|---|
| onfocus | Sí | Sí | Sí | Sí | Sí |
Sintaxis
En HTML:
En JavaScript:
object .onfocus=function(){ Inténtalo tú mismo " En JavaScript, utilizando el addEventListener() método:
object .addEventListener("focus", myScript );
Inténtalo tú mismo " Nota: El addEventListener() método no es compatible en Internet Explorer 8 y versiones anteriores.
Detalles técnicos
| burbujas: | No |
|---|---|
| cancelable: | No |
| Tipo de evento: | FocusEvent |
| etiquetas HTML admitidas: | Todos los elementos HTML, excepto: <base>, <BDO>, España, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title> |
| DOM Versión: | Nivel 2 Eventos |
Más ejemplos
Ejemplo
El uso de "onfocus" junto con el "onblur" evento:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Inténtalo tú mismo " Ejemplo
Delegación de eventos: establecer el parámetro de useCapture addEventListener() true:
<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>
Inténtalo tú mismo " Ejemplo
delegación de eventos: cómo utilizar el evento focusin (no soportado por 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>
Inténtalo tú mismo " <Objeto de evento