How to catch blur event in parent element

Question

I would like to achieve that when I move from group1 input to group2 input, blur event is caught, so I can make additional actions. Isn't blur event propagated upper to parents?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<html>
  <head>     
    <script type="text/javascript">
     $( document ).ready(function() {
       $("[data-id=container]").on("blur", function() {
         alert("Blur caught in parent");
       });
     });
    </script>
  </head>
  <body>
    <div data-id="container" style="border: 1px solid gray;">
       Group 1        
      <input type="text" />
      <input type="text" />
      <input type="text" />
    </div>
    <div data-id="container" style="border: 1px solid gray;">  
      Group 2      
      <input type="text" />
      <input type="text" />
      <input type="text" />
    </div>
  </body>
</html>

see http://stackoverflow.com/questions/1259716/how-to-blur-the-div-element — Satpal, Mar 24 '17 at 17:07

score 0 · Answer 1 · answered Mar 24 '17 at 17:24

I am not able to completely understand your question, but assuming that you want to have some form of validation when you change from group 1 to group 2 I am writing the following code. The following snippet is a general form that you may customize to your need.

                <input type="text" id="one" onblur="validate">
                <input type="text" id="two" onblur="validate">
                <input type="text" id="three" onblur="validate">
                <script type="text/javascript>
                    function validate()
                    {
                        var a = document.getElementById("one");
                        var b = document.getElementById("two");
                        var c = document.getElementById("three");
                        if (b.hasFocus() == true) //checks if the second input box has focus
                        {
                            alert("Value of the focused field is "+a.value); //this will give you the value in the first input box
                        }
                        else if (c.hasFocus() == true) //checks if the third input box has focus
                        {
                            a.focus(); //this will get the focus back on the first input box
                        }
                    }

                </script>

How to catch blur event in parent element

1 Answers1