0

Tengo un formulario login en una modal en bootstrap 4, y quiero autofocus en los campos email y password.

<form action="proceso.php" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <input type="email" class="form-control" id="email" name="email" placeholder="Correo electrónico">
    </div>
    <div class="form-group">
        <input type="password" class="form-control" id="password" name="password" placeholder="Contraseña">
    </div>
    <button type="submit" class="btn btn-primary btn-block">Aceptar</button>
</form>

Leyendo la documentación de bootstrap. Para poner autofocus en el campo email utilizo esto, y funciona:

<script>
    $('#login').on('shown.bs.modal', function () {
        $('#email').trigger('focus')
    })
</script>

Ahora quiero que el foco pase luego al campo password luego de darle ENTER, para ello agrego lo siguiente:

<script>
    $('#login').on('shown.bs.modal', function () {
        $('#password').trigger('focus')
    })
</script>

Pero al cargar la página el foco aparece en el segundo campo. Cuál es el problema?

5
  • No te sirve realizarlo por HTML con tabindex??
    – Anderviver
    Commented el 25 ene. 2018 a las 22:26
  • No. Así está el diseño.
    – Puntay
    Commented el 25 ene. 2018 a las 22:31
  • No se puede aplicar múltiples focos en un formulario, es por eso que se le reemplaza el primer foco y solo aparece el segundo campo con foco Commented el 25 ene. 2018 a las 22:50
  • Entiendo que entiendes porque el foco aparece en el segundo campo, el primer script hace que al cargarse el modal, el campo "email" coja el foco, a continuación el segundo script hace lo mismo pero con el campo password, luego la ultima instrucción es que al cargarse el modal sea el campo password el que coja el foco, ahora bien entiendo que quieres que después de rellenar el campo "email", de alguna manera el foco pase al campo "pasword", pero cual es el criterio? por ejemplo después de darle a la tecla enter o cuando?
    – Rddevelop
    Commented el 25 ene. 2018 a las 22:52
  • Ah, claro, luego de dar Enter.
    – Puntay
    Commented el 25 ene. 2018 a las 22:53

2 respuestas 2

0

Te dejo un ejemplo mas sencillo de aplicar

$('#campoUser').keyup((e) => {
    if (e.key == "Enter") {
        $('#campoPassword').focus()
    }
})

Aveces es más fácil hacer las cosas de forma nativa

0

Es como dice Jhonatan en el comentario. El problema es que el foco no puede estar simultáneamente en ambos campos. - El listener del modal open debe disparar el focus en email - El listener de la tecla ENTER (o del submit del form, verificando que password esté vacío, o algo así) debería disparar el focus en password.

Es importante hacer preventDefault para evitar que ENTER dispare un submit no deseado

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.