13

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.

Ivin
  • 4,435
  • 8
  • 46
  • 65
  • why you need onFocus if you want to call function on Click event? – Adil Shaikh Jul 01 '12 at 07:54
  • @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? – Ivin Jul 01 '12 at 08:03

4 Answers4

31

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>
Chirag Jain
  • 1,367
  • 1
  • 11
  • 27
Adil Shaikh
  • 44,509
  • 17
  • 89
  • 111
  • @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. – Ivin Jul 01 '12 at 14:02
  • @MohammadAdil, It worked. Cheers! :) May i know what is the relevence of TabIndex attr in this? Just being curios. – Ivin Jul 01 '12 at 15:34
  • This method requires the JS code to be put in the document ready section, right? – Ivin Jul 01 '12 at 15:37
  • 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 – Adil Shaikh Jul 01 '12 at 15:40
  • 3
    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.. – Adil Shaikh Jul 01 '12 at 15:43
6

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();
Community
  • 1
  • 1
Tats_innit
  • 33,991
  • 10
  • 71
  • 77
  • Your method worked and i got focus() working. Now how can i implement lostFocus()? blur() isn't working. – Ivin Jul 01 '12 at 08:07
  • @Orbb Glad it helped: here you should take the code for lost focus / focus out from here: http://stackoverflow.com/questions/3088738/jquery-need-alternative-to-focusout `:)` – Tats_innit Jul 01 '12 at 08:11
  • @Jashwant MAGIC `:))` hows it goin? Ah I will read your question latter and reply in more detail might be this week `:P` – Tats_innit Jul 01 '12 at 09:17
  • @Jashwant lol :) not greedy for points Just want to give a `Quality` to your question `:))` great job in question though! :) – Tats_innit Jul 01 '12 at 09:25
0

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

gherkins
  • 14,603
  • 6
  • 44
  • 70
Uncle
  • 1
  • 1
-1

Sure.

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

$("#your-div-id").focusout(function() {
    // code here
});
Pixel
  • 104
  • 1
  • 10
  • 1
    it didnt work. I tried it as you suggested. Then i tried it with bind/live since the div is generated dynamically. But nope! :( – Ivin Jul 01 '12 at 08:01