Question

We have an interface design that displays data fields in regular HTML elements, and only expose an input form when user clicks on the display element.

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

In the case above, user clicks on the header element, which has been wired in jquery to hide itself and show the form. On pressing Enter key, the form also hides itself and shows back the header, while simultaneously making an Ajax request to submit the form data.

The issue now is how to enhance the user experience the next step, where the user tabbing or clicking out of the form onto elsewhere in the document will have the form realise it needs to hide and submit as usual.

I tried the blur event for the form, but later realise it is merely the bubbling of the blur events from individual input elements within, thus resulting in the form hiding/submitting on merely losing focus of the firstName input; the user doesn’t get a chance to work on the lastName input. Of course, if I tried a stopPropagation() on each input field, the form never blurs since it does not possess a blur event of its own.

How can I reliably capture a blur event at the form level?

To provide more context to this implementation, it is a reusable UI component, so it is not really statically placed in a single page document. They may even appear multiple times in a same document. They should not do any wiring at the document level that potentially mess up other components. All fields in such forms are optional as well, so one cannot count on all fields to be filled before submitting.

Answer 1

Found that jquery provides a pseudo selector check “:focus“; this makes it easier to listen for blur at the form level, but check if any other sibling input elements got the focus after a slight delay.

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

Alternatively the selector can be applied to the form ‘.form input’ or some other descendant selector to cover the input fields of interest.