Input field blur event doesn't trigger on iPad keyboard hide?

Question

I have a page with an input field. I want to run some javascript code on blur. Like this,

$('#inputfield').on('blur', function() {
...
});

It works fine on a desktop browser, if I tab away or click the mouse outside the field. On an iPad Safari browser, it works fine if I tap outside the input field.

But if I click on the hide keyboard button on the lower left corner, blur event is not triggered. Doesn't blur event fire on keyboard hide? I see the pointer/cursor moves away from the input field on keyboard hide. Is there any way to capture the keyboard hide event?

Thanks.

Answer 1

From Inforbiro :

jQuery - Focusout() and Blur() Event Differences

You can find many examples on Internet where you can see that focusout and blur events are used as synonyms and you can be confused with their usage. What is difference between jQuery's .focusout() and .blur() events?

The difference between .focusout() and blur() jQuery event is that the .focusout() is sent to an element when it, or any element inside of it, loses focus. The .blur() event supports detecting the loss of focus from parent elements (ie, it supports event bubbling) What is event bubbling

Event bubbling in jQuery represents propagating event fired in one element to upper or lower elements in DOM hierarchy.

I've had problems in the past with blur , now I just stick to focusout

Take a look at the jQuery Documentation, they show an example of focusout vs blur