最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jQuery - raise event when focus leaves a group of controls - Stack Overflow

programmeradmin1浏览0评论

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
Add a ment  | 

2 Answers 2

Reset to default 10

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

  });
发布评论

评论列表(0)

  1. 暂无评论