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
Jquery - Differentiate between 'click' and 'focus' on same input when using both

I'm trying to trigger an event on an input if the input is clicked or if the input comes in to focus. The issue i'm having is preventing the event from firing twice on the click as, obviously, clicking on …

Read More