evento onfocusin
Ejemplo
Ejecute un JavaScript cuando un campo de entrada esté a punto de recibir el foco:
<input type="text"
onfocusin="myFunction()">
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
El evento onfocusin ocurre cuando un elemento está a punto de recibir el foco.
Consejo: El evento onfocusin es similar al evento onfocus . 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, debe usar el evento onfocusin.
Sugerencia: El evento onfocusin es lo opuesto al evento onfocusout .
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el evento.
| Event | |||||
|---|---|---|---|---|---|
| onfocusin | Yes | Yes | 52.0 | Yes | Yes |
Nota: Es posible que el evento onfocusin no funcione como se esperaba en Chrome, Safari y Opera 15+ usando la sintaxis HTML DOM de JavaScript. Sin embargo, debería funcionar como un atributo HTML y usando el método addEventListener() (consulte los ejemplos de sintaxis a continuación).
Sintaxis
En HTML:
<element onfocusin="myScript">
En JavaScript (es posible que no funcione como se espera en Chrome, Safari y Opera 15+):
object.onfocusin = function(){myScript};
En JavaScript, usando el método addEventListener():
object.addEventListener("focusin", myScript);
Nota: el método addEventListener() no es compatible con Internet Explorer 8 y versiones anteriores.
Detalles técnicos
| Burbujas: | sí |
|---|---|
| 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 "onfocusin" junto con el evento "onfocusout":
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Ejemplo
Delegación de eventos: establecer el parámetro useCapture de addEventListener() en verdadero (para enfoque y desenfoque):
<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:
<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>