SweetAlert, Фокусировка ввода после подтверждения

Question

В основном у меня есть форма, где вы можете добавить пользователя.

<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="correo@ejemplo.cl"/> 
      <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> 

После успешного появления на экране появляется сладкое предупреждение, в котором говорится, что добавление обработано.

Перед тем, как swal У меня было нормальное предупреждение, и после демонстрации успеха он сосредоточился на первом входе формы.

Но теперь, когда появляется сообщение swal, он дает фокус во время просмотра swal и когда вы нажимаете кнопку подтверждения, фокус ушел.

Я попытался установить onConfirmButton к ложным, а затем добавить функцию

$.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(); 

        }) 
       ); 

Но это просто не работает.

Answer 1

Итак, сосредоточьте элемент на близком расстоянии.

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

Answer 2

Я не понимаю, в sweemalert Но если открыть модальное поэтому фокус на входе будет теряться при нажатии на выходе

Так что если у вас есть возможность сделать фокус (например, в callback).

Answer 3

Наконец-то я решил это только с помощью location.reload();

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

И добавление атрибута автофокуса к первому входу.

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

Answer 4

Используйте следующее:

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

Смотрите здесь:

Reference

Answer 5

Por La Linea 227 де-swetalert dev.js encuentras Эст Código у CREA Эста переменных $ (datafocus) .focus() ;.

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

Y ан вт HTML modifica Аси:

$.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'; 
 
        }) 
 
       );

Answer 6

Используйте .then(function(){ как раз перед закрытием swal с ";".

Используя свой код, это будет так:

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(); 
});