HTML-форма для автоматического скрытия и отправки на blur

Question

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

<div class="header-container"> 
    <header class="header-displayName"></header> 

    <form class="form" style="display: none;"> 
    <section><label>First Name</label> 
     <span><input type="text" class="form-input" placeholder="first name"></span></section> 
    <section><label>Last Name</label> 
     <span><input type="text" class="form-input" placeholder="last name"></span></section> 
     <div class="hidden-submit"><input type="submit" tabindex="-1"/></div> 
    </form> 
</div> 

В приведенном выше случае, пользователь нажимает на элемент заголовка, который был проводную в JQuery, чтобы скрыть себя и показывать форму. При нажатии клавиши Enter форма также скрывается и отображает заголовок, одновременно делая запрос Ajax для отправки данных формы.

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

Я попробовал событие размытия для формы, но позже понял, что это просто пузырь событий размытия от отдельных элементов ввода внутри, что приводит к тому, что форма скрывается/отправляется только при потере фокуса ввода firstName; у пользователя нет возможности работать с входом lastName. Конечно, если бы я попробовал stopPropagation() в каждом поле ввода, форма никогда не стирается, поскольку у нее нет собственного размытия.

Как я могу надежно захватить событие размытия на уровне формы?

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

Answer 1

Найдено, что jquery обеспечивает проверку псевдоселектора «: focus»; это облегчает прослушивание размытия на уровне формы, но проверяет, получили ли какие-либо другие входные элементы брата, после небольшой задержки.

setTimeout(function(){ 
    if (!$('.form-input').is(':focus')) { 
    $('.form').submit(); 
    } 
}.bind(this), 10); 

В качестве альтернативы селектор может быть применен к форме «.form ввода» или какой-либо другой селектор потомка для покрытия полей ввода, представляющих интерес.