jQuery focus/blur on form, not individual inputs -

how achieved via jquery?

when user clicks on input in form, focussed. when user clicks out of form input blurred, but, blur not triggered between tabbing between inputs in form itself.

for this, we're looking @ basic structure:

<form> <input ... /> <input ... /> <input ... /> </form> 

so again, lets click on input in form, know form focused. next, when user clicks off of input blur triggered if clicked outside form.

i've asked question , kindly received input on how achieve blurring effect when last input field in form blurred, not element in input list.

thanks, mark anderson

the sequence of events when you're tabbing between inputs:

  click on input1:  input1 focus    clickb on input2: input1 blur                     input2 focus    click outside:    input2 blur 

when input loses focus need check if other element within form gains focus. or can check if active element still within form:

$('form').on('focusout', function(event) {     settimeout(function() {         if (!event.delegatetarget.contains(document.activeelement)) {             console.log('form blur');         }     }, 0); }); 

jsfiddle

note form doesn't blur on submit, may need add submit handler if want same thing on blur , submit.

also note use of settimeout, it's required because blur , focusout events emitted when element lose focus, haven't lost yet.