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

javascript jquery onfocus lost-focus
phoenix picture phoenix · Jul 1, 2012 · Viewed 40.8k times · Source

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

Mohammad Adil picture Mohammad Adil · Jul 1, 2012

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>

Related questions

Handle blur event of parent element fired by focus on child element and by clicking outside of child

I have a "parent div" containing a child box input type=number. When user clicks outside of input box I use blur or focusout event of parent div to use input values at some other place. I also need to …

Read More
Check for CapsLock ON in "onfocus" event

My following code for checking whether Capslock is on or not works fine on "onkeypress" event. But i want it for "onfocus" event. i tried replacing "onkeypress" with "onfocus" for the control,but it doesnt work for me. Any help? (…

Read More
How do I redirect to another webpage?

How can I redirect the user from one page to another using jQuery or pure JavaScript?

Read More