I want to detect if the user click outside the form. The issue is that whenever I click first the input field then clicking outside the form, the onblur listener doesn't detect.
HTML
<form class="foo" tabindex="0" onClick="foo('inside')" onBlur="foo('outside')">
<input id="myInput">
</form>
<p class="p"></p>
CSS
.foo {
background-color: salmon;
height: 100px;
width: 100px;
}
.foo:focus {
outline: 0;
}
JS
const p = document.querySelector('.p');
function foo(x) {
p.innerHTML = x;
}
Your code is fine but there seems to be some intermittent glitch with codepen. I deleted and re-typed "onblur" and it was fine but then wasn't.
It works as expected on the snippet tool here and on js fiddle (and sometimes on codepen)
const p = document.querySelector('.p');
function foo(x) {
p.innerHTML = x;
}.foo {
background-color: salmon;
height: 100px;
width: 100px;
}
.foo:focus {
outline: 0;
}<div class="foo" tabindex="0" onClick="foo('inside')" onBlur="foo('outside')"></div>
<p class="p"></p>You are using onBlur event on an form. Form doesn't have a blur event. It's only valid for input fields. But the onClick event works. It can be done in any html element.
What you want is this.
<form class="foo" tabindex="0" >
<input id="myInput" onBlur="foo('outside')" onFocus="foo('inside')" />
</form> <p class="p"></p>