Input field blur event not triggering when hiding iPad keyboard?

Question

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

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

It works great on a desktop browser if I remove or click the mouse outside the field. In Safari for iPad, it works fine if I go outside the input field.

But if I click on the "Hide Keyboard" button in the lower left corner, the blur event will not be triggered. Doesn’t blaze fire events on the keyboard? I see that the cursor / cursor moves away from the input field on hiding the keyboard. Is there any way to capture an event hide a keyboard?

Thanks.

Answer 1

From Inforbiro :

jQuery - Differences in focus () and blur () events

You can find many examples on the Internet where you can see that focus and blur events are used as synonyms, and you can be confused by their use. What is the difference between jQuery.focusout () and .blur () events?

The difference between the .focusout () and blur () jQuery event is that .focusout () is dispatched to an element when it or any element inside it loses focus. The .blur () event supports the detection of focus loss from parent elements (i.e., supports event buffering) What is an event bubble

The bubbling event in jQuery is a propagation event that is fired on a single item, the top or bottom items in a DOM hierarchy.

I 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 focus vs blur