ajax請求後表單輸入選項卡破壞

Question

我有一個表單用於註冊用戶，並由AJAX請求處理。
當AJAX請求完成後，SweetAlert會向用戶顯示發生的更新，但是當我關閉它並單擊表單字段時，鍵盤上的Tab鍵不再執行任何操作。

settimeout被添加，所以我可以第一個swal顯示什麼，所以我可以「模擬」一個緩慢的互聯網連接。

<div class="box box-info"> 
    <div class="box-body"> 
     <form id="db-test"> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="fa fa-user"></i></span> 
       <input type="text" id="user" class="form-control" placeholder="Username" autocomplete="off"> 
      </div> 
      <br> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="fa fa-key"></i></span> 
       <input type="password" id="pass" class="form-control" placeholder="Password" autocomplete="off"> 
      </div> 
      <br> 
      <button class="pull-right btn btn-info" id="register"><b>register</b></button> 
     </form> 
    </div> 
</div> 

<script type="text/javascript"> 
    (function() { 

     $('#register').submit(function (e) { 
      e.preventDefault(); 

      var credentials = { 
       username: $('#user').val(), 
       password: $('#pass').val() 
      } 

      swal({ 
       title: 'Working on your registration', 
       text: 'Give me a bit...<br/><br/><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>', 
       html: true, 
       showConfirmButton: false 
      }); 
      setTimeout(function() { 
       $.ajax({ 
        url: '../register', 
        method: 'POST', 
        headers: {'X-api': 'application/json'}, 
        data: credentials 
       }) 
        .done(function (data, textStatus, jqXHR) { 
         swal({ 
          title: 'Result', 
          text: '<pre>' + JSON.stringify(data, null, 4) + '</pre>', 
          html: true 
         }) 
        }); 
      }, 1000); 
     }) 
    })(); 
</script> 

Answer 1

經過大量的挖掘，似乎是SweetAlert的問題。
現在一直存在一個問題描述了問題。 https://github.com/t4t5/sweetalert/issues/391

現在，看來我需要做的是這樣的（注意window.onkeydown和window.onfocus：

swal({ 
    title: 'Working on your registration', 
    text: 'Give me a bit...<br/><br/><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>', 
    html: true, 
    showConfirmButton: false 
}); 
$.ajax({ 
    url: '../register', 
    method: 'POST', 
    headers: {'X-api': 'application/json'}, 
    data: credentials 
}) 
    .done(function (data, textStatus, jqXHR) { 
     window.onkeydown = window.onfocus = null; // This line is the solution 
     swal({ 
      title: 'Result', 
      text: '<pre>' + JSON.stringify(data, null, 4) + '</pre>', 
      html: true 
     }) 
}); 

Answer 2

幾個問題：

您需要正確地關閉你的第一個swal。你打開它。在第一個swal上設置timer: 1000，而不是在第二個上使用setTimeout。這不是必需的。

swal({ 
    title: 'Working on your registration', 
    text: 'Give me a bit...<br/><br/><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>', 
    html: true, 
    timer: 1000, 
    showConfirmButton: false 
}); 

在您的AJAX調用有沒有必要使用.done，只需使用success，然後在確認closeOnConfirm: true關閉最後swal。

$.ajax({ 
    url: '../register', 
    method: 'POST', 
    headers: {'X-api': 'application/json'}, 
    data: credentials, 
    success: function (data) { 
     swal({ 
      title: 'Result', 
      text: '<pre>' + JSON.stringify(data, null, 4) + '</pre>', 
      html: true, 
      closeOnConfirm: true 
     }) 
    }; 
});