Is it possible to write onFocus/lostFocus handler for a DIV using JS or jQuery?

Question

I have a div and when the user clicks the div a function should be called. And when the user clicks something else (anything other than this div) another function should be called.

So basically i need to have onFocus() and lostFocus() function calls associated with this DIV. Is it available in JavaScript or even in jQuery?

Thanks.

Elfish

why you need onFocus if you want to call function on Click event? – Focus

@Mohammad, Yes, i could make use of Click event instead of onFocus. But the problem is, i need to have the lostFocus event or something similar to it. Any idea? – Elfish

Answer 1

You need to add tabindex attribute to div :

$("#mydiv").focusin(function() {
  $("#mydiv").css("background", "red");
});
$("#mydiv").focusout(function() {
  $("#mydiv").css("background", "white");
});

#mydiv {
  width: 50px;
  height: 50px;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv" tabindex="100"></div>
<div id="anotherdiv"></div>

Focus

@Mohammad, Jashwant Thanks a lot for that answer guys. I saw the jsfiddle demo. Exactly what i wanted. But SADLY, this method isnt working in my code. It says => $("#mydiv").focusin is not a function. – Elfish

@MohammadAdil, It worked. Cheers! :) May i know what is the relevence of TabIndex attr in this? Just being curios. – Elfish

This method requires the JS code to be put in the document ready section, right? – Elfish

you can put that in ready itself or inside a function that is called from ready --------And --tabindex is used to define a sequence that you follow when you use the Tab key to navigate through a page – Focus

This is because a div doesn't have a tabindex by default, and to use focusin and focusout on an element ,it should have a tabindex,,that is why we are setting a tabindex to our div.. – Focus

Answer 2

Focus do not work on DIV : http://api.jquery.com/focus/

ALso good read: jquery : focus to div is not working

If you want to focus a div or anything normally can't be focused, set the tag's tabindex to -1 first.
eg: $("div#header").attr("tabindex",-1).focus();

Cannell

Your method worked and i got focus() working. Now how can i implement lostFocus()? blur() isn't working. – Elfish

@Orbb Glad it helped: here you should take the code for lost focus / focus out from here: #3089238 :) – Cannell

@Jashwant MAGIC :)) hows it goin? Ah I will read your question latter and reply in more detail might be this week :P – Cannell

@Jashwant lol :) not greedy for points Just want to give a Quality to your question :)) great job in question though! <although ++ are always welcome and encouraging> :) – Cannell

Answer 3

Not sure if this solution suits your web page, but you could use JQuery on() to attach a click event to the body element and delegate it to child div's. Then in your event handler, test the id attribute and handle as such; something like:

$(body).on("click", "div", function (evt) {
     if ($(this).attr("id") == "innerDiv") {
            handle inner div click here
     } else {
            hanlde out div click here
     {
}

Hope this helps...

Shaer

Answer 4

Sure.

$("#your-div-id").focusin(function() {
    // code here
});

$("#your-div-id").focusout(function() {
    // code here
});

Secrecy

it didnt work. I tried it as you suggested. Then i tried it with bind/live since the div is generated dynamically. But nope! :( – Elfish