javascript - ajax请求后表单输入选项卡损坏

我有一个用户注册表格，由AJAX请求处理。
当AJAX请求完成时，SweetAlert向用户显示发生了什么更新，但是当我关闭它并在表单字段中单击时，键盘上的Tab键将不再执行任何操作。

添加了settimeout，这样我就可以看到第一个小信号显示的内容，从而可以“模拟”缓慢的Internet连接。

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

最佳答案

经过大量的挖掘，看来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
        })
});

关于javascript - ajax请求后表单输入选项卡损坏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41644762/