Come ottenere l'evento div onblur per eseguire una funzione javascript?

Ciao Ho un div che contiene tre caselle di testo, ho bisogno di una funzione da chiamare una volta che il controllo è fuori dal tag div, non voglio usare l'evento onclick perché lo stato attivo può essere spostato fuori dal div premendo il tasto tab sulla tastiera o in un altro modo. Vorrei anche sapere se c'è un modo per raggiungere questo obiettivo usando qualsiasi libreria javascript come jquery.Come ottenere l'evento div onblur per eseguire una funzione javascript?

Grazie, questo è l'esempio del codice html

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

fonte

2011-01-31 Vamsi

è possibile associare il gestore eventi onblur a ciascuno degli elementi di input e verificare nel gestore se qualcuno di loro hanno messa a fuoco (utilizzando 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, invece, utilizzando jQuery potrebbe semplificare il processo (soprattutto se si hanno un sacco di input):

<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: ho avvolto i gestori di eventi all'interno di un setTimeout per assicurarsi che il l'altro elemento ha avuto il tempo di concentrarsi.

fonte

2011-01-31 06:13:53 jhartz

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

Grazie, la prima soluzione ha funzionato per me – Vamsi

+1 per la seconda soluzione, che mi ha aiutato anche. Direi -1 invece per il primo: il comportamento di activeElement non è garantito ** durante ** l'evento di sfocatura, ma solo ** dopo ** i suoi gestori completi. – superjos

Forse un evento "onChange" sarebbe meglio servire le vostre esigenze. Non riesco a pensare a una situazione in cui si farebbe clic sul DIV e non sui campi di input.

fonte

2011-01-31 06:00:51 Dawson

È necessario aggiungere tabindex = 0 al div in modo che ottenga lo stato attivo. Quindi qualcosa come

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

dovrebbe farlo.

fonte

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>

fonte

2011-01-31 06:12:23 Ron

L'ordine relativo di eventi di messa a fuoco/sfocatura non è garantito essere la stessa tra i vari browser. Per esempio. vedi [helephant, 2008] (http://helephant.com/2008/01/16/focus-event-handler-run-in-different-order-in-ie-than-firefox/). Ciò causa problemi al tuo codice (e anche al mio!) – superjos

Ho usato il seguente script jQuery in uno scenario simile con 3 caselle di testo all'interno di 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>

fonte

2013-03-26 04:38:06

Come ottenere l'evento div onblur per eseguire una funzione javascript?

risposta

Problemi correlati