HTML | Evento DOM onfocusout

El evento HTML DOM onfocusout ocurre cuando un elemento pierde el foco. El onfocusout es igual que onblur, la única diferencia es que el evento onblur no burbujea.
Si desea averiguar si un elemento o su hijo pierde el foco, debe utilizar el evento onfocusout. 
El evento onfocusin es lo opuesto al evento onfocusout.
Nota: Firefox no es compatible con el evento onfocusout, pero con la ayuda de capturar al oyente, puede averiguar si un hijo de un elemento pierde el foco o no. 
Etiquetas compatibles: admite TODOS los elementos HTML, EXCEPTO:

  •  <base>
  • <bdo>
  • <br>
  • <cabeza>
  • <html>
  • <iframe>
  • <meta>
  • <parámetro>
  • <script>
  • <estilo>
  •  <título >

Sintaxis:
En HTML: 
 

<element onfocusout="myScript">

En JavaScript (es posible que no funcione como se espera en Chrome, Safari y Opera 15+): 
 

object.onfocusout = function(){myScript};

En JavaScript, usando el método addEventListener(): 
 

object.addEventListener("focusout", myScript);

Ejemplo: uso de HTML 
 

html

<!DOCTYPE html>
<html>
 
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>HTML DOM onfocusout event </h2> Email:
        <input type="email" id="email" onfocusout="gfgFun()">
 
        <script>
            function gfgFun() {
                var x = document.getElementById("email");
                alert("Focus out");
            }
        </script>
    </center>
</body>
 
</html>

Producción: 
 

Ejemplo: uso de JavaScript 
 

html

<!DOCTYPE html>
<html>
 
<body>
 
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>HTML DOM onfocusout event </h2> Email:
        <input type="email" id="email">
 
        <script>
            document.getElementById(
              "email").onfocusout = function() {
                gfgFun()
            };
 
            function gfgFun() {
                alert("Focus out");
            }
        </script>
    </center>
</body>
 
</html>

Producción: 
 

Ejemplo: Usando el método addEventListener(): 
 

html

<!DOCTYPE html>
<html>
 
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>HTML DOM onfocusout event </h2>
      Email: <input type="email" id="email">
 
        <script>
            document.getElementById(
              "email").addEventListener("focusout", gfgFun);
 
            function gfgFun() {
                alert("Input field lost focus.");
            }
        </script>
    </center>
</body>
 
</html>

Producción: 
 

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

  • Google Chrome
  • explorador de Internet
  • Firefox 52.0
  • 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 *