Basically I have a form where you can add an User.

<div class="container">
    <div><h1>Formulario para agregar Usuarios</h1></div>
  <form id='addForm' role="form" method="POST">
    <div class="form-group col-lg-6">

        <div class="form-group ">
            <label for="nombre">Nombre:</label>
            <input class="form-control" type="text" id="nombre" name="nombre" maxlength="15" placeholder="Ingrese su Nombre"/>
            <div id="nom" name="nom"></div>
        </div>
        <div class="form-group">
            <label for="apellido">Apellido:</label>            
            <input class="form-control" type="text" id="apellido" name="apellido" maxlength="15" placeholder="Ingrese su Apellido" />
            <div id="ape" name="ape"></div>
        </div>
        <div class="form-group">
            <label for="correo">Correo:</label>
            <input class="form-control" type="email" id="correo" name="correo" maxlength="30" placeholder="[email protected]"/>
            <div id="cor" name="cor"></div>
        </div>
        <div class="form-group">
            <label for="password">Contraseña:</label>            
            <input class="form-control" type="password" id="password" name="password" maxlength="15" placeholder="Ingrese una Contraseña (mínimo 6 caracteres)" />
            <div id="pas" name="pas"></div>
        </div>      
        <div class="form-group">
        <button class="btn btn-default col-sm-2" id="addUser" name="addUser" type="submit" >
           <span class="glyphicon glyphicon-plus-sign"></span> Agregar</button>
        </div>

           <div class="form-group col-sm-8" id="userData" name="userData"></div>         

    </div>

After success a sweet alert appears on screen telling you the add worked.

Before the swal I had a normal alert, and after showing success It would focus on the first input of the form.

But now when the swal shows up, It gives the focus while swal's on screen and when you click the confirm button the focus is gone.

I tried to set onConfirmButton to false and then add a function

$.post('agregar.php', {nombre: nombre, apellido: apellido, correo: correo, password: password}, function(data) {
            //Se recibe un resultado (data) y se muestra en el div
            //(que en este caso sería una cadena string con algún mensaje)
            if (data=='1') {
                //swal("¡Hecho!", "¡Has Agregado un Usuario Nuevo!", "success");
                swal({
                    title: "¡Hecho!",
                    text: "¡Has Agregado un Usuario Nuevo!",
                    closeOnConfirm: false
                },
                    function(){
                        swal.close();
                        $('#nombre').val('')
                        $('#apellido').val('');
                        $('#correo').val('');
                        $('#password').val('');
                        $('#nombre').focus();

                    })
                );

But it just doesn't work.

Basically I have a form where you can add an User.

<div class="container">
    <div><h1>Formulario para agregar Usuarios</h1></div>
  <form id='addForm' role="form" method="POST">
    <div class="form-group col-lg-6">

        <div class="form-group ">
            <label for="nombre">Nombre:</label>
            <input class="form-control" type="text" id="nombre" name="nombre" maxlength="15" placeholder="Ingrese su Nombre"/>
            <div id="nom" name="nom"></div>
        </div>
        <div class="form-group">
            <label for="apellido">Apellido:</label>            
            <input class="form-control" type="text" id="apellido" name="apellido" maxlength="15" placeholder="Ingrese su Apellido" />
            <div id="ape" name="ape"></div>
        </div>
        <div class="form-group">
            <label for="correo">Correo:</label>
            <input class="form-control" type="email" id="correo" name="correo" maxlength="30" placeholder="[email protected]"/>
            <div id="cor" name="cor"></div>
        </div>
        <div class="form-group">
            <label for="password">Contraseña:</label>            
            <input class="form-control" type="password" id="password" name="password" maxlength="15" placeholder="Ingrese una Contraseña (mínimo 6 caracteres)" />
            <div id="pas" name="pas"></div>
        </div>      
        <div class="form-group">
        <button class="btn btn-default col-sm-2" id="addUser" name="addUser" type="submit" >
           <span class="glyphicon glyphicon-plus-sign"></span> Agregar</button>
        </div>

           <div class="form-group col-sm-8" id="userData" name="userData"></div>         

    </div>

After success a sweet alert appears on screen telling you the add worked.

Before the swal I had a normal alert, and after showing success It would focus on the first input of the form.

But now when the swal shows up, It gives the focus while swal's on screen and when you click the confirm button the focus is gone.

I tried to set onConfirmButton to false and then add a function

$.post('agregar.php', {nombre: nombre, apellido: apellido, correo: correo, password: password}, function(data) {
            //Se recibe un resultado (data) y se muestra en el div
            //(que en este caso sería una cadena string con algún mensaje)
            if (data=='1') {
                //swal("¡Hecho!", "¡Has Agregado un Usuario Nuevo!", "success");
                swal({
                    title: "¡Hecho!",
                    text: "¡Has Agregado un Usuario Nuevo!",
                    closeOnConfirm: false
                },
                    function(){
                        swal.close();
                        $('#nombre').val('')
                        $('#apellido').val('');
                        $('#correo').val('');
                        $('#password').val('');
                        $('#nombre').focus();

                    })
                );

But it just doesn't work.

• javascript
• jquery
• focus
• confirm
• sweetalert

8 Answers 8

Use promise with "then" function like: .then(function(){ just before closing the swal function with ";".

Using your code, it will be like that:

swal({
    title: "¡Hecho!",
    text: "¡Has Agregado un Usuario Nuevo!",
    closeModal: false
}).then(function() {
        swal.close();
        $('#nombre').val('')
        $('#apellido').val('');
        $('#correo').val('');
        $('#password').val('');
        $('#nombre').focus();
});

Use the following:

window.setTimeout(function () { 
    document.getElementById('nombre').focus(); 
}, 0); 

See here:

Reference

I know it's an old topic, but i share my solution for anyone who comes here from google search :) as "limont" has said in github: "A small delay 100ms was introduced before focusing the previous active element. The reason can be found here:Github"

and there is JsFiddle from "limonte" that help solving your problem: complete example

and this is my own code snippet that works:

        Swal({
            title: 'خطا...',
            text: 'لطفا یک شماره وارد کنید.',
            type: 'error',
            confirmButtonText: 'وارد کردن شماره',
            onAfterClose: () => {
                setTimeout(() => $("#Mobile").focus(), 110);
            }
        });

So focus the element on close.

$('.TheElementSelector').focus();

I dont understand in sweemalert But if you open a modal so the focus on the input will get lost when you click on exit

So if you have an option to do focus (like in a callback function) do it.

Por la linea 227 de swetalert-dev.js encuentras este código y crea esta variable $(datafocus).focus();.

  // Reset the page to its previous state
  window.onkeydown = previousWindowKeyDown;
  if (window.previousActiveElement) {
    //window.previousActiveElement.focus();
    $( datafocus ).focus();
    datafocus = '';
  }

Y en tu html modifica así:

$.post('agregar.php', {nombre: nombre, apellido: apellido, correo: correo, password: password}, function(data) {
            //Se recibe un resultado (data) y se muestra en el div
            //(que en este caso sería una cadena string con algún mensaje)
            if (data=='1') {
                //swal("¡Hecho!", "¡Has Agregado un Usuario Nuevo!", "success");
                swal({
                    title: "¡Hecho!",
                    text: "¡Has Agregado un Usuario Nuevo!",
                    closeOnConfirm: false
                },
                    function(){
                        swal.close();
                        $('#nombre').val('')
                        $('#apellido').val('');
                        $('#correo').val('');
                        $('#password').val('');
                        datafocus = '#nombre';
                    })
                );

This worked for me

Swal.fire({
  title: "Are you sure?",
  text: "You won't be able to revert this!",
  icon: "warning",
  didClose: (e) => {
    // focus your element
  },
});

Hope this helps

credit to GitHub by limenote

Finally I solved this just using a location.reload();

swal({
                    title: "¡Hecho!",
                    text: "¡Has Agregado un Usuario Nuevo!",
                    type: "success",
                    closeOnConfirm: false
                },
                function(){
                    location.reload();
                }
                );

And adding an autofocus attribute to the first input.

<input class="form-control" autofocus type="text" id="nombre" name="nombre" maxlength="15" placeholder="Ingrese su Nombre"/>