フォームの入力タブがajaxリクエストの後に破損しました

Question

私はユーザーの登録フォームを持っており、AJAXリクエストによって処理されます。
AJAXリクエストが完了すると、SweetAlertはユーザーに何が起こったのかを表示しますが、フォームフィールドで閉じると、キーボードのタブキーは何もしません。

settimeoutが追加されたので、最初のスワールが表示されているので、私は低速のインターネット接続を "シミュレート"できます。

<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を閉じる必要があり

。あなたはそれを開いたままにしておきます。 2番目にsetTimeoutを使用する代わりに、を最初のswalに設定してください。それは必要ではありません。あなたのAJAX呼び出しで

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

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