¿Cómo obtener el evento div onblur para ejecutar una función javascript?

Hola Tengo un div que contiene tres cuadros de texto, necesito que se llame a una función una vez que el control está fuera de la etiqueta div, no quiero usar el evento onclick porque el foco se puede mover de la div presionando la tecla de tabulación en el teclado o de alguna otra manera. También me gustaría saber si hay una forma de lograr esto usando cualquier biblioteca de JavaScript como jquery.¿Cómo obtener el evento div onblur para ejecutar una función javascript?

Gracias, este es el código HTML de ejemplo

<html> 
<head> 
    <title>Div Onblur test</title> 

    <script type="text/javascript"> 
     function Callme() { 
      alert("I am Called") 
     } 
    </script> 

</head> 
<body> 
    <div onblur="javascript:Callme();"> 
     <input type=text value ="Inside DIV 1" /> 
     <input type=text value ="Inside DIV 2" /> 
     <input type=text value ="Inside DIV 3" /> 
    </div> 
    <input type=text value ="Outside DIV" /> 
</body> 
</html>

Fuente

2011-01-31 Vamsi

puede enlazar el controlador de eventos onBlur a cada uno de los elementos de entrada y registro en el controlador si alguno de ellos tiene el enfoque (utilizando document.activeElement).

<script type="text/javascript"> 
    function checkBlur() { 
     setTimeout(function() { 
      if (document.activeElement != document.getElementById("input1") && 
       document.activeElement != document.getElementById("input2") && 
       document.activeElement != document.getElementById("input3")) { 
       alert("I am called"); 
      } 
     }, 10); 
    } 
</script> 
<!-- ... --> 
<div> 
    <input type="text" id="input1" value="Inside DIV 1" onblur="checkBlur()" /> 
    <input type="text" id="input2" value="Inside DIV 2" onblur="checkBlur()" /> 
    <input type="text" id="input3" value="Inside DIV 3" onblur="checkBlur()" /> 
</div> 
<input type="text" value="Outside DIV" />

O, en cambio, el uso de jQuery podría simplificar el proceso (especialmente si usted tiene una gran cantidad de entradas):

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#theDiv input").bind("blur", function() { 
      setTimeout(function() { 
       var isOut = true; 
       $("#theDiv input").each(function() { 
        if (this == document.activeElement) isOut = false; 
       }); 
       if (isOut) { 
        // YOUR CODE HERE 
        alert("I am called"); 
       } 
      }, 10); 
     }); 
    }); 
</script> 
<!-- ... --> 
<div id="theDiv"> 
    <input type="text" value="Inside DIV 1" /> 
    <input type="text" value="Inside DIV 2" /> 
    <input type="text" value="Inside DIV 3" /> 
</div> 
<input type="text" value="Outside DIV" />

EDIT: Me envolvió los controladores de eventos dentro de un setTimeout para asegurarse de que la otro elemento tuvo tiempo para enfocarse.

Fuente

2011-01-31 06:13:53 jhartz

isOut =! JQuery.contains ($ ("# theDiv"). Get(), document.activeElement); – Ron

Gracias, su primera solución funcionó para mí – Vamsi

+1 para la segunda solución, que también me ayudó. Yo diría -1 en cambio para el primero: el comportamiento de ActiveElement no está garantizado ** durante el evento ** blur, pero solo ** después ** de que se completen sus controladores. – superjos

Tal vez un evento "onchange" servirían mejor a sus necesidades. No puedo pensar en una situación en la que se haga clic en el DIV, y no en los campos de entrada.

Fuente

2011-01-31 06:00:51 Dawson

Deberá agregar tabindex = 0 al div para que se enfoque. Así algo así como

<div tabindex="-1" onblur="Callme();">

debe hacerlo.

Fuente

2011-01-31 06:06:03 Bitsplitter

<html> 
<head> 
    <title>Div Onblur test</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
     function Callme() { 
      alert("I am Called"); 
     } 

     $(function() { 
      var callme; 
      $('#onblur-callme input') 
       .focus(function() { 
        callme = false; 
       }) 
       .blur(function() { 
        callme = true; 
        setTimeout(function() { 
         if (callme) { 
          Callme(); 
         } 
        }, 1); 
       }); 
     }); 
    </script> 

</head> 
<body> 
    <div id="onblur-callme"> 
     <input type="text" value ="Inside DIV 1" /> 
     <input type="text" value ="Inside DIV 2" /> 
     <input type="text" value ="Inside DIV 3" /> 
    </div> 
    <input type="text" value ="Outside DIV" /> 
</body> 
</html>

Fuente

2011-01-31 06:12:23 Ron

el orden relativo de acontecimientos enfoque/desenfoque no se garantiza que sea la misma a través de diferentes navegadores. P.ej. ver [helephant, 2008] (http://helephant.com/2008/01/16/focus-event-handler-run-in-different-order-in-ie-than-firefox/). Esto causa problemas a su código (¡y también a los míos!) – superjos

He utilizado el siguiente script de jQuery en un escenario similar con 3 cajas de texto dentro de un div:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("jQuerySelectorToGetYourDiv").focusout(function (e) { 
      if ($(this).find(e.relatedTarget).length == 0) { 
       // Focus is now outside of your div. Do something here. 
       // e.Target will give you the last element within the 
       // div to lose focus if you need it for processing. 
      } 
     }); 
    }); 
</script>

Fuente

2013-03-26 04:38:06

¿Cómo obtener el evento div onblur para ejecutar una función javascript?

Respuesta

Cuestiones relacionadas