Div - Onblur Function

Div - onblur function

For blur event to fire on an element, the element needs to receive focus first. But <div> elements do not receive focus by default.

You can add tabindex="0" or contentEditable to your div so it will receive focus.

See it in action: http://jsfiddle.net/t25rm/

How to implement onBlur/onFocus for a div with nested input fields?

Just adding on to this with what I think is the best solution these days.

This ignores blur events by using the Node.contains method to check whether the element is a descendant of that which is already focused.

handleBlur({ currentTarget, relatedTarget }) {
   if (currentTarget.contains(relatedTarget)) return;

   /* otherwise normal actions to perform on blur */

   console.log('blur');
}
handleFocus(e) {
   console.log('focus');
}

Javascript blur event on wrapper div

Issue solved when I changed the blur event to focusout

From MDN web docs:
The focusout event is fired when an element is about to lose focus. The main difference between this event and blur is that the latter doesn't bubble.

This is exactly what I needed.

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

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.

Span or Div tag onblur and onfocus

Blur and Focus are both events of input elements, e. g. text input fields. Focus is fired when the input element gets the focus so you can type, blur when the input element looses the focus.
span and div elements are not focussable in the way input elements are; they are just layout elements, nothing a user really interacts with. Therefore, spans and divs have no focus or blur event.

Allow div to be clicked with 'onblur' event on input text

Unlike the onclick event, the onmousedown event is fired before the onblur event:

var input_timeout = undefined;

        document.getElementById("navigation").querySelector("INPUT").onkeyup = function () {

            clearTimeout(input_timeout);

            var val = this.value;

            input_timeout = setTimeout(function () {

                var to_add_to = document.querySelector("#navigation div");

                to_add_to.innerHTML = "";

                to_add_to.style.visibility = "visible";

                var div_to_put = document.createElement("div");

                div_to_put.style.visibility = "visible";

                div_to_put.id = val;

                div_to_put.innerHTML += "<font>" + val + "</font";

                div_to_put.onmousedown = function () {

                    console.log(this.id);

                }

                to_add_to.appendChild(div_to_put);

            }, 500);

        }

        document.getElementById("navigation").querySelector("INPUT").onblur = function () {

            this.value = "";

            document.querySelector("#navigation div").style.visibility = "hidden";

            document.querySelector("#navigation div").innerHTML = "";

        }

body {

            margin: 0;

        }

        #navigation {

            min-width: 620px;

            background-color: silver;

            width: 100%;

            height: 50px;

            position: fixed;

            top: 0;

        }

        #navigation input {

            height: 30px;

            width: 200px;

            font-size: 15px;

            color: orange;

            border: 1px solid orange;

            border-radius: 5px;

            display: block;

            margin: 10px 5% 0% auto;

            padding: 0px 28px 0px 5px;

            float: right;

        }

        #navigation div {

            width: 200px;

            height: 50px;

            position: absolute;

            top: 41px;

            right: 5%;

            color: orange;

            background-color: white;

            border: 1px solid orange;

            border-radius: 5px;

            visibility: hidden;

        }

        #navigation div div {

            width: 100%;

            height: 30px;

            text-align: center;

            font-size: 25px;

            color: orange;

            border: 1px solid orange;

            border-radius: 5px;

            overflow: hidden;

            position: absolute;

            top: 0;

            right: 0;

        }

<html>

<head>

    <meta charset="utf-8" />

    <title>Page Title</title>

</head>

<body>

    <div id="navigation">

        <input type="text" name="Search">

        <div></div>

    </div>

</body>

</html>

Div onblur event called when clicking checkbox inside div

On modern browsers the onblur event doesn't fires with div elements, a crossbrowser approach that can also deal with the issues of IE could be to use event delegation, binding a click event handler to the document, and hide the popup when the clicked element is not a checkbox or the lookupButton, for example:

document.onclick = function (e) { 
  e = e || window.event; 
  var element = e.target || e.srcElement; 

  if (element.tagName != "INPUT" && element.type != "checkbox" &&
      element.className != "lookupButton") { 
    hidePopup(); 
  } 
}; 

Check the above example with the rest of your code here.

---

Related Topics