0

Hola buenas tardes espero me ayuden con este tema de sweetalert2 v10, estado usando versiones anteriores que solo usan el swal y estoy actualizándome de versión al sweetalert2 v10 lo que pasa es que cuando quiero hacer un focus cuando le doy en OK en la ventana del sweetalert2 me posiciona el focus solo unos segundos después se va al botón donde hice el submit del formulario lo que con versiones anteriores no me pasaba eso, alguien tiene alguna idea de como solucionarlo.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="#" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Ejemplos</title>
</head>

<body>
    <div class="container">
        <form id="enviar">
            Nombres:
            <input name="nombre" type="text" class="form-control" id="nombre" style="width: 200px;">
            <br>
            <input class="btn btn-success" name="registrar" type="submit" value="Registrar">
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $("#enviar").submit(function(event) {

            if ($("#nombre").val() == "") {
                swal.fire({
                    icon: 'info',
                    title: 'Faltas Datos',
                    text: 'Ingrese nombres por favor'
                }).then(function() {
                    swal.close();
                    $('#nombre').focus();
                });
                return false;
            }
        });

       /*  $("#enviar").submit(function(event) {
            if ($("#nombre").val() == "") {
                swal({
                    icon: 'info',
                    text: 'Ingrese nombres',
                    closeModal: false
                }).then(function() {
                    swal.close();
                    $('#nombre').focus();
                });
                return false;
            }
        }); */
    </script>
</body>
</html>

2
  • Es mejor utilizar el evento "click" para el botón de "Registrar" ya que es más manejable de esa manera que con el evento "submit". Commented el 22 dic. 2020 a las 23:26
  • Si lo hecho pero igual no funciona como necesito que se quede en el input el focus
    – Herless
    Commented el 22 dic. 2020 a las 23:36

1 respuesta 1

1

Puedes lograr tu objetivo haciendo uso de didClose, para que, al cerrarse el modal, hagas focus() al input que necesites.

swal.fire({
    icon: 'info',
    title: 'Faltas Datos',
    text: 'Ingrese nombres por favor',
    didClose: () => { $("#name").focus(); }
});

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="#" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Ejemplos</title>
</head>

<body>
    <div class="container">
        <form id="enviar">
            Nombres:
            <input name="nombre" type="text" class="form-control" id="nombre" style="width: 200px;">
            <br>
            <input class="btn btn-success" name="registrar" type="submit" value="Registrar">
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $("#enviar").submit(function(event) {

            if ($("#nombre").val() == "") {
                swal.fire({
                    icon: 'info',
                    title: 'Faltas Datos',
                    text: 'Ingrese nombres por favor',
                    didClose: () => { $('#nombre').focus(); }
                })
                
                return false;
            }
        });

       /*  $("#enviar").submit(function(event) {
            if ($("#nombre").val() == "") {
                swal({
                    icon: 'info',
                    text: 'Ingrese nombres',
                    closeModal: false
                }).then(function() {
                    swal.close();
                    $('#nombre').focus();
                });
                return false;
            }
        }); */
    </script>
</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.