0

Tengo un detalle al querer mostrar un focus en un formulario con JS, la verdad soy novato en JS y hay muchas cosas que aun no entiendo mi código es el siguiente:

  document.addEventListener("DOMContentLoaded",(e) =>{
   mostrarFormulario('#crear-cuenta','.registro-user','#enlace','#nombre');
   cerrarFormulario('#close','.registro-user');
 
});

 function mostrarFormulario(boton,registro,enlace,nombre){
  
    document.addEventListener('click', (e)=>{
     if(e.target.matches(boton) || e.target.matches(enlace)){
       document.querySelector(registro).style.visibility='visible';
        //document.querySelector(nombre).focus(); //intenté esto
        
       //document.getElementById('nombre').focus();esto tambie
       
       let focus = document.getElementById('nombre');
       focus.focus();// esto tambien  :C   
     } })   }
   
   function cerrarFormulario(closeForm,registro){
   document.addEventListener('click', (e)=>{
     if(e.target.matches(closeForm)){
      document.querySelector(registro).style.visibility='hidden';
     
     } })  }
  
   
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Menu Principal</title>
    <link rel="stylesheet" href="css/estilos.css">
    <script src="https://kit.fontawesome.com/1bbadd233d.js" crossorigin="anonymous"></script>
</head>

<body>
    <div class="registro-user">       
          <div class="envio-datos">
              <form action="" method="post">
                <div class="nombre-apellido">
                    <input class="estilo-input" type="text" placeholder="Nombre" name="nombre" id="nombre">
                    <input  class="estilo-input" type="text" placeholder="Apellido"  name="apellido" >
                </div>
                   <div class="correo">
                    <input class="estilo-input_correo" type="text" name="mail" placeholder="Número de celular o correo electrónico">
                   </div>
                   
                   <div class="contrasena">
                    <input class="estilo-input_contrasena" type="text" name="contrasena" placeholder="Contraseña">
                   </div>

                  <div class="boton-registrarte">
                      <button class="button-r" type="submit">Registrarte</button>
                  </div>
                  
                </form>
             </div>
        </div>    
</body>
<script   src="index.js"></script>
</html>
Este formulario al que le quiero aplicar el focus es un formulario con visibility:hidden cuando clic a un botón sale el formulario tapando al login, pero cuando llamo al formulario recibo una leyenda de que tengo que ingresar el dato del formulario del login y yo no quiero que se vea eso así que quiero ponerle ya sea el blur al input del login y que no me mande la leyenda o que directamente al abrir el registro colocarle un focus rapidamente a la input del formulario. Espero contar con su apoyo y muchas gracias.

1 respuesta 1

1

Lo que está pasando es que el botón al cual estás clickeando para mostrar el segundo formulario está disparando el evento submit del primer formulario, lo cual es algo normal ya que tanto ese accionar como el hecho de pulsar la tecla ENTER mientras uno de los elementos del formulario tiene el enfoque generan ese comportamiento.

Lo que puedo sugerirte es que no utilices ese botón para mostrar el segundo formulario, y que, en su lugar, utilices un <span> y con CSS le des la apariencia de un botón. Finalmente, con JS le das la funcionalidad de mostrar el segundo formulario cuando este elemento sea clickeado.

1
  • 1
    Alex de nuevo salvándome la vida. Tuve que dejar un poco los códigos por asuntos familiares tu solución me sirvió de mucho. Muchas gracias el 14 nov. 2021 a las 1:17

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.