force the focus to leave a form field with jQuery in iOS when selecting non-input element

ios, ipad, javascript, jquery, user-experience

Solution

Try just doing a quick `blur()` on the form, that might work.

$('body').on('click', function () { 
    $('form').blur(); 

    // And since you said selecting an anchor might help, potentially doing a:
    $('a#whatever').blur(); // might do the trick too
});

Problem

Using jQuery or something similar, is it possible to detect when a user has clicked away, effectively removed focus, from a form field in iOS? I have conventional form which has a first name, last name, address line 1, address line 2 etc. On an iPad when you select a form field the only way to leave that form field is to select another field in the form by clicking it or by hitting the `Previous` or `Next` buttons in the keyboard pane. As the keyboard pane is shown clicks to other non-input elements on the page are ignored, so focus remains on the form field. Is there a way with jQuery/JavaScript (or anything else) to force the focus to leave the form field if I click away from it by clicking a non-input form element? Here's an example of what I mean. In the screen below, when the focus is on the `Line 1` element I can't move out of it by clicking a non-input element.

Original source