Evento onfocusin

Eventos DOM FocusEvent

Definición y uso

El evento onfocusin ocurre cuando un elemento está a punto de obtener el foco.

A pesar de que Firefox no admite el evento onfocusin, puede determinar si un subelemento de un elemento obtiene el foco utilizando el detector de captura del evento onfocus (usando el parámetro opcional useCapture del método addEventListener()).El evento onfocusin es similar a Evento onfocusLa principal diferencia radica en que el evento onfocus no se propaga. Por lo tanto, si desea saber si un elemento o uno de sus subelementos ha obtenido el foco, debe usar el evento onfocusin.

A pesar de que Firefox no admite el evento onfocusin, puede determinar si un subelemento de un elemento obtiene el foco utilizando el detector de captura del evento onfocus (usando el parámetro opcional useCapture del método addEventListener())..

A pesar de que Firefox no admite el evento onfocusin, puede determinar si un subelemento de un elemento obtiene el foco utilizando el detector de captura del evento onfocus (usando el parámetro opcional useCapture del método addEventListener()).Consejo: Evento onfocusoutEl evento onfocusin es similar a

Al revés.

Ejemplo

Ejemplo 1

Ejecutar JavaScript cuando el campo de entrada esté a punto de obtener el foco:

Prueba por tu cuenta

<input type="text" onfocusin="myFunction()">

Más ejemplos TIY a continuación.

Sintaxis

En HTML:< element.addEventListener("focusin",onfocusin="

Prueba por tu cuenta

">

En JavaScript, usar el método addEventListener():En JavaScript (puede no funcionar correctamente en Chrome, Safari y Opera 15+):.addEventListener("focusin",.onfocusin = function(){

Prueba por tu cuenta

};

En JavaScript, usar el método addEventListener():object .addEventListener("focusin",myScript

Prueba por tu cuenta

Nota:); Internet Explorer 8 o versiones anteriores no lo admitenMétodo addEventListener()

.

Detalles técnicos: Compatibilidad
Burbuja: Cancelable:
No admitido: FocusEvent
Etiquetas HTML admitidas: Todos los elementos HTML, excepto: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title>
Versión del DOM: Eventos de Nivel 2

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente el evento.

Evento Chrome IE Firefox Safari Opera
onfocusin Compatibilidad Compatibilidad 52.0 Compatibilidad Compatibilidad

Nota:El evento onfocusin puede no funcionar como se espera en Chrome, Safari y Opera 15+ utilizando la sintaxis de JavaScript HTML DOM. Sin embargo, debe usarse como atributo HTML y con el método addEventListener() (véase el ejemplo de sintaxis a continuación).

Más ejemplos

Ejemplo 2

Utilice los eventos "onfocusin" y "onfocusout" juntos:

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

Prueba por tu cuenta

Ejemplo 3

Delegación de eventos: configure el parámetro useCapture de addEventListener() en true (usado para focus y blur):

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

Prueba por tu cuenta

Ejemplo 4

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>

Prueba por tu cuenta

Eventos DOM FocusEvent