Is it possible to write onFocus/lostFocus handler for a DIV using JS or jQuery?
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();
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>