0

Tengo un formulario que aparece cuando doy a un botón y desaparece cuando le doy a este mismo lo tengo dentro de un div. Quiero que desaparezca cuando se da click fuera de este pero no me funciona ni el blur, ni el focus out,ni mouse out.

window.addEventListener("load",init);
function init(){
    document.getElementById('login').addEventListener("click",form);
    document.getElementById('div-form').addEventListener("focusout",ocultarform);
    
}
function form(){
    let formvisibility= document.getElementById("div-form").style.visibility;
    console.log(formvisibility);
    if(formvisibility=="" || formvisibility=="hidden"){
        document.getElementById("div-form").style.visibility="visible";
    }else{
        document.getElementById("div-form").style.visibility="";
    }
    
}
function ocultarform(){
    console.log("1")
    document.getElementById("div-form").style.visibility="hidden";
}

1
  • 2
    Sin tener tu HTML es complicado decirlo a ciencia cierta pero intuyo que el elemento .div-form se trata de un <div>. Ten en cuenta que no todos los elementos pueden ser enfocados, por lo que si no pueden ser enfocados no puedes detectar cuando pierden el foco (el <div> no es un elemento enfocable en cambio un <input> o un <a> si).
    – phpMyGuel
    el 2 oct. 2020 a las 9:23

1 respuesta 1

0

Hola no se si esto sea lo que estas buscando dejo el ejemplo completo:

window.addEventListener("load",init);
function init(){
    document.getElementById('login').addEventListener("click",form);
}

const form = (e) => {
  // console.log(e.target)
  const x = e.target.parentElement.querySelector('#form_login')
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}


document.getElementById("form_login").addEventListener('click', (e) => {
  const x = e.target
  x.style.display = "none";
})


init()
form()
#form_login {
  border: 1px solid salmon;
  padding: 20px 0;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="hiddenForm">
    <form id="form_login">
      <label for="email">Email</label>
      <input type="text" name="email">
    </form>
    <button id="login">Login</button>
  </div>
  
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.