HTML | Evento DOM onfocusin

El evento HTML DOM onfocusin ocurre cuando un elemento se está enfocando. Onfocusin es lo mismo que onfocus, la única diferencia es que el evento onfocus no burbujea.

Si desea averiguar si un elemento o su hijo recibe el foco, debe usar el evento onfocusin.
El evento onfocusin es lo opuesto al evento onfocusout.

Nota: Firefox no es compatible con el evento onfocusin, pero con la ayuda de capturar al oyente, puede averiguar si un hijo de un elemento obtiene el foco o no.

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

Ejemplo: uso de HTML

<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>HTML DOM onfocusin Event</h2> Focus:
        <input type="text" onfocusin="GFGfun(this)">
  
        <script>
            function GFGfun(foc) {
                foc.style.background = "yellow";
            }
        </script>
    </center>
</body>
  
</html>                

Producción:

Ejemplo: uso de JavaScript

<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>HTML DOM onfocusin Event</h2> Focus:
        <input type="text" id="fname">
        <script>
            document.getElementById(
              "fname").onfocusin = function() {
                myFunction()
            };
  
            function myFunction() {
                document.getElementById(
                  "fname").style.backgroundColor = "yellow";
            }
        </script>
    </center>
</body>
  
</html>

Producción:

Ejemplo: Usando el método addEventListener():

<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>HTML DOM onfocusin Event</h2> Focus:
        <input type="text" id="fname">
  
        <script>
            document.getElementById(
              "fname").addEventListener("focusin", gfgFun);
  
            function gfgFun() {
                document.getElementById(
                  "fname").style.backgroundColor = "yellow";
            }
        </script>
    </center>
</body>
  
</html>

Producción:

Navegadores compatibles: los navegadores compatibles con HTML DOM onfocusin Event se enumeran a continuación:

  • Google Chrome
  • explorador de Internet
  • Firefox 52
  • safari de manzana
  • Ópera

Publicación traducida automáticamente

Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *