I have 3 textboxes within a div and I need to raise an event when focus leaves one of those inputs and doesn't go to another one of these 3 inputs.
As long as the user is editing one of these 3 controls, the event wont raise. The event will only raise when the focus has changed to a control which isn't one of these inputs.
I tried using focusout
on all 3 inputs and checking if document.ActiveElement
is one of the 3 inputs but focusout
of one control occurs before focusin
on another so document.ActiveElement
is always empty.
Anyone has any idea how to get around this?
I have 3 textboxes within a div and I need to raise an event when focus leaves one of those inputs and doesn't go to another one of these 3 inputs.
As long as the user is editing one of these 3 controls, the event wont raise. The event will only raise when the focus has changed to a control which isn't one of these inputs.
I tried using focusout
on all 3 inputs and checking if document.ActiveElement
is one of the 3 inputs but focusout
of one control occurs before focusin
on another so document.ActiveElement
is always empty.
Anyone has any idea how to get around this?
Share Improve this question edited Jul 5, 2013 at 13:16 JunoPatch 53 bronze badges asked Jul 5, 2013 at 12:53 user779444user779444 1,3955 gold badges22 silver badges39 bronze badges 1- 1 That's a tricky one, I would probably go for a short timer approach – musefan Commented Jul 5, 2013 at 12:54
2 Answers
Reset to default 10I would consider using a timer to solve this tricky dilemma.
When focus is lost, start the timer. Then you can cancel the timer if focus is then set upon another "safe" input.
Something like this:
var timeoutID;
$("#TheSafeZone input").focus(function () {
if (timeoutID) {
clearTimeout(timeoutID);
timeoutID = null;
}
});
$("#TheSafeZone input").blur(function () {
releaseTheHounds();
});
function releaseTheHounds() {
timeoutID = setTimeout(function () {
alert("You're all going to die down here");
}, 1);
}
Here is a working example
NOTE: I have set the timeout to just 1ms
, this seems to work reliably for me but it may be worth doing a few tests in other browsers (I am using Chrome). I guess it is down to how the JS engine handles events, but I don't know enough about that to confidently say all browsers will work the same
Put "Blur" and "Focus" events with opposite logic so that when ever user leaves group of controls specified in DIV only "Blur" event will be fired.
$(document).on("blur","#edit-area .form-control", function (event) {
$('.editButtons').show();
});
$(document).on("focus","#edit-area .form-control", function (event) {
$('.editButtons').hide();
});