I have two inputs that together form a single semantic unit (think an hours and minutes input together forming a time input). If both inputs lose focus I want to call some Javascript function, but if the user merely jumps between those two, I don't want to trigger anything.

I've tried wrapping these two inputs in a div and adding an onBlur to the div, but it never triggers.

Next I tried adding onBlurs to both inputs and having them check the other's :focus attribute through jQuery, but it seems that when the onBlur triggers the next element hasn't received focus yet.

Any suggestions on how to achieve this?

EDIT: Someone questioned the purpose of this. I'd like to update a few other fields based on the values contained by both these inputs, but ideally I don't want to update the other fields if the user is still in the process of updating the second input (for instance if the user tabs from first to second input).

I have two inputs that together form a single semantic unit (think an hours and minutes input together forming a time input). If both inputs lose focus I want to call some Javascript function, but if the user merely jumps between those two, I don't want to trigger anything.

I've tried wrapping these two inputs in a div and adding an onBlur to the div, but it never triggers.

Next I tried adding onBlurs to both inputs and having them check the other's :focus attribute through jQuery, but it seems that when the onBlur triggers the next element hasn't received focus yet.

Any suggestions on how to achieve this?

EDIT: Someone questioned the purpose of this. I'd like to update a few other fields based on the values contained by both these inputs, but ideally I don't want to update the other fields if the user is still in the process of updating the second input (for instance if the user tabs from first to second input).

• javascript
• jquery

4 Answers 4

I made a working example here: https://jsfiddle/bs38V/5/

It uses this:

$('#t1, #t2').blur(function(){
    setTimeout(function(){
        if(!$('#t1, #t2').is(':focus')){
            alert('all good');
        }
    },10);
});

var focus = 0;
$(inputs).focus(function() { focus++ });
$(inputs).blur(function() {
    focus--;
    setTimeout(function() {
        if (!focus) {
            // both lost focus
        }
    }, 50);
});

An alternative approach is to check the relatedTarget of the blur event. As stated in the MDN documentation this will be the element which is receiving the focus (if there is one). You can handle the blur event and check if the focus has now been put in your other input. I used a data- attribute to identify them, but you could equally well use the id or some other information if it fits your situation better.

My code is from an angular project I've worked on, but the principle should translate to vanilla JS/other frameworks.

<input id="t1" data-customProperty="true" (blur)="onBlur($event)">
<input id="t2" data-customProperty="true" (blur)="onBlur($event)">

onBlur(e: FocusEvent){
    const semanticUnitStillHasFocus = (val.relatedTarget as any)?.dataset?.customProperty === "true";

    // Do whatever you like with this knowledge
}

What is the purpose of this behavior ? The blur event triggers when a field looses focus, and only one field can gain focus at a time.

What you could do, in case of validation for instance, is to apply the same function on blur for both the fields and check the values of the fields altogether.

Without a context, it is difficult to help you more.

d.