CODEWITHSUNDEEP
javascriptjqueryiframeonblur
Bjorn Forsberg
Bjorn Forsberg

Reputation: 470

Trigger blur on focused element, on click outside of iFrame

I have a page with an iframe in it. Inside the iframe is a contenteditable section, which saves on the onblur event. This works fine as long as the onblur event happens inside the iframe (clicking in another area inside of the same iframe).

However if the user clicks outside the iframe area (parent), then the blur event never gets triggered inside the iframe (child), and so the data does not save.

How can I get the onblur event to trigger in the iframe, even with a click outside of the iframe in the parent?

All of the answers I can find on this involve the opposite scenario, with the click inside the iframe to trigger event in the parent. How do I do the opposite?

Upvotes: 0

Views: 1407

Answers (1)

Bjorn Forsberg
Bjorn Forsberg

Reputation: 470

So it turns out the issue was the blur event not being passed along to my editor. Adding the below code inside the iFrame with the editor in it, makes it work as expected:

$("[contenteditable='true']").blur(function(e) {
  editor1.trigger('blur', e, $(e.target));
})

Upvotes: 0

Related Questions