Quiero detectar si el usuario hace clic fuera del formulario. El problema es que cada vez que hago clic primero en el campo de entrada y luego hago clic fuera del formulario, el oyente onblur no lo detecta.
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; }Su código está bien, pero parece haber algún problema técnico intermitente con codepen. Eliminé y volví a escribir "onblur" y estaba bien, pero luego no.
Funciona como se esperaba en la herramienta de fragmentos aquí y en js fiddle (y, a veces, en 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>Está utilizando el evento onBlur en un formulario. El formulario no tiene un evento de desenfoque . Solo es válido para campos de entrada. Pero el evento onClick funciona. Se puede hacer en cualquier elemento html.
Lo que quieres es esto.
<form class="foo" tabindex="0" > <input id="myInput" onBlur="foo('outside')" onFocus="foo('inside')" /> </form> <p class="p"></p>