Home / Questions / 416336
Accepted
Herless
Asked: 2021-12-23 14:02:36 +0800 CST 2021-12-23 14:02:36 +0800 CST

How to focus on input with sweetalert2 v10

  • 772

Hello, good afternoon, I hope you can help me with this sweetalert2 v10 issue, I have been using previous versions that only use the swal and I am upgrading to sweetalert2 v10, what happens is that when I want to focus when I click OK in the sweetalert2 window The focus is positioned only a few seconds later, it goes to the button where I did the submit of the form, which with previous versions did not happen to me, does anyone have any idea how to solve it.

<!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>

javascript

1 Answers

  1. Best Answer

    You can achieve your goal by making use of didClose, so that when the modal closes, you make focus()the input you need.

    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>

    • 1