Comment obtenir div événement onblur pour exécuter une fonction javascript?

Hi
J'ai un div qui contient trois zones de texte , j'ai besoin d'une fonction qui doit être appelée une fois que le contrôle est en dehors de la balise div, je ne veux pas utiliser l'événement onclick parce que la mise au point peut être déplacé hors de la div en appuyant sur la touche tab du clavier ou d'une autre façon.
Je voudrais aussi savoir si il existe un moyen de réaliser cela à l'aide de toutes les bibliothèques javascript comme jquery.

Merci, c'est l'exemple de code 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>

InformationsquelleAutor Vamsi | 2011-01-31

Vous pouvez lier l'événement onblur gestionnaire de chacun des éléments d'entrée et de vérifier dans le gestionnaire si l'un d'eux a le focus (à l'aide de 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" />

Ou, plutôt, à l'aide de jQuery pourrait simplifier le processus (surtout si vous avez beaucoup d'entrées):

<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: j'ai enveloppé les gestionnaires d'événements à l'intérieur d'un setTimeout pour s'assurer que l'autre élément a eu le temps de se concentrer.

isOut = !jQuery.contient($("#theDiv").get(), document.activeElement);
Je vous remercie, votre première solution a fonctionné pour moi
+1 pour la seconde solution, qui m'a aidé aussi. Je dirais -1 au lieu de la première: activeElement comportement n'est pas garanti durant flou de l'événement, mais seulement après ses gestionnaires complète.

InformationsquelleAutor jhartz

10

Vous aurez besoin d'ajouter tabindex=0 à la div pour obtenir le focus.
Donc, quelque chose comme
```
<div tabindex="-1" onblur="Callme();">
```
devrait le faire.

InformationsquelleAutor Bitsplitter

J'ai utilisé le suivant script jQuery dans un scénario similaire avec 3 zones de texte à l'intérieur d'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>

InformationsquelleAutor Todd L

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

L'ordre relatif des focus/flou des événements n'est pas garanti d'être le même sur différents navigateurs. E. g. voir helephant, 2008. Cela provoque des troubles de votre code (et à la mienne aussi!)

InformationsquelleAutor Ron

0

Peut-être un "onChange" événement permettrait de mieux répondre à vos besoins. Je ne peux pas penser à une situation où la DIV serait cliqué, et non pas les champs de saisie.

InformationsquelleAutor Dawson

Vous devez vous connecter pour publier un commentaire.