Блог

У меня есть два входных данных, которые вместе образуют единую семантическую единицу (например, входные данные часов и минут вместе образуют ввод времени). Если оба входных сигнала теряют фокус, я хочу вызвать некоторую функцию Javascript, но если пользователь просто переключается между этими двумя, я не хочу ничего запускать.

Я пытался обернуть эти два входных параметра в div и добавить onBlur в div, но это никогда не срабатывает.

Затем я попытался добавить ONBLUR к обоим входам и заставить их проверять другой атрибут:focus через jQuery, но, похоже, что при срабатывании onBlur следующий элемент еще не получил фокус.

Есть предложения о том, как этого добиться?

РЕДАКТИРОВАТЬ: Кто-то усомнился в цели этого. Я хотел бы обновить несколько других полей на основе значений, содержащихся в обоих этих входных данных, но в идеале я не хочу обновлять другие поля, если пользователь все еще находится в процессе обновления второго ввода (например, если пользовательские вкладки с первого на второй ввод).

Я привел рабочий пример здесь: https://jsfiddle.net/bs38V/5 /

Он использует это:

 $('#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);
});
  

Альтернативный подход заключается в проверке relatedTarget события размытия. Как указано в документации MDN, это будет элемент, который получает фокус (если он есть). Вы можете обработать событие размытия и проверить, был ли теперь сделан акцент на другом вашем вводе. Я использовал data- атрибут для их идентификации, но вы с таким же успехом можете использовать id или какую-то другую информацию, если это лучше подходит для вашей ситуации.

Мой код взят из проекта angular, над которым я работал, но принцип должен быть переведен на ванильный JS / другие фреймворки.

 <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
}
  

Какова цель такого поведения? Событие размытия срабатывает, когда поле теряет фокус, и только одно поле может получить фокус одновременно.

Что вы могли бы сделать, например, в случае проверки, так это применить одну и ту же функцию к размытию для обоих полей и проверить значения полей в целом.

Без контекста сложно помочь вам больше.

d.