web-dev-qa-db-fra.com

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

Bonjour, j'ai un div qui contient trois zones de texte, j'ai besoin d'une fonction à appeler une fois que le contrôle est hors de la balise div, je ne veux pas utiliser l'événement onclick touche tab sur le clavier ou d'une autre manière. J'aimerais également savoir s'il existe un moyen d'y parvenir en utilisant des bibliothèques javascript telles que jquery.

Merci, ceci 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>
javascriptjqueryhtmlonblur
14
Vamsi

Vous pouvez lier le gestionnaire d'événement onblur à chacun des éléments d'entrée et vérifier si l'un d'entre 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 bien, utiliser 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 dans une setTimeout pour m'assurer que l'autre élément avait le temps de faire la mise au point.

9
jhartz

Vous devrez ajouter tabindex = 0 à la division pour qu’elle se concentre. Donc quelque chose comme

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

devrait le faire.

10
Bitsplitter

J'ai utilisé le script jQuery suivant dans un scénario similaire avec 3 zones de texte dans une 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>
4
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>
2
Ron

Peut-être qu'un événement "onChange" satisferait mieux vos besoins. Je ne peux pas penser à une situation dans laquelle la DIV serait sur laquelle cliquer, et non aux champs de saisie.

0
Dawson