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.

Answer 1

Here i created a Working demo of what you want http://jsfiddle.net/kPbfL/1/

You need to add tabindex attribute to div :

Markup:

 <div id="mydiv" tabindex="-1"></div>

Javascript

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

CSS

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

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();

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

Answer 4

Sure.

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

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