How to get div onblur event to execute a javascript function?

Question

Hi I have a div that contains three textboxes , i need a function to be called once the control is out of the div tag, I don't want to use the onclick event because the focus can be moved out of the div by pressing the tab key on the keyboard or some other way. I would also like to know if there is a way to achieve this using any javascript libraries like jquery.

Thank you, this is the sample html code

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

score 11 · Answer 1 · edited Aug 30 '13 at 00:15

11

You'll need to add tabindex=0 to the div in order for it to gain focus. So something like

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

should do it.

edited Aug 30 '13 at 00:15

Ariel

25,995
5
59
69

answered Jan 31 '11 at 06:06

Bitsplitter

980
7
17

jhartz · Accepted Answer · 2011-01-31T06:21:32.307

You can bind the onblur event handler to each of the input elements and check in the handler if any of them have focus (using 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" />

Or, instead, using jQuery could simplify the process (especially if you have a lot of inputs):

<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: I wrapped the event handlers inside a setTimeout to make sure that the other element had time to focus.

isOut = !jQuery.contains($("#theDiv").get(), document.activeElement); — Ron, Jan 31 '11 at 06:40
+1 for the second solution, which helped me as well. I'd say -1 instead for the first: activeElement behaviour is not guaranteed **during** blur event, but only **after** its handlers complete. — superjos, Sep 06 '12 at 16:45

Todd L · Answer 3 · 2013-04-19T00:30:59.240

I've used the following jQuery script in a similar scenario with 3 textboxes inside a 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>

Ron · Answer 4 · 2011-01-31T06:18:43.307

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

The relative order of focus/blur events is not guaranteed to be the same across different browsers. E.g. see [helephant, 2008](http://helephant.com/2008/01/16/focus-event-handler-run-in-different-order-in-ie-than-firefox/). This causes troubles to your code (and to mine as well!) — superjos, Sep 06 '12 at 16:19

score 0 · Answer 5 · answered Jan 31 '11 at 06:00

0

Perhaps an "onChange" event would better serve your needs. I can't think of a situation where the DIV would be clicked, and not the input fields.

answered Jan 31 '11 at 06:00

Dawson

7,567
1
26
25

How to get div onblur event to execute a javascript function?

5 Answers5

Linked