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

Question

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

添加了 settimeout，这样我就可以看到第一个 swal 显示的内容，这样我就可以 "simulate" 缓慢的互联网连接。

<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

几个问题：

您需要正确关闭第一个 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
        })
    };
});

Answer 2

经过大量挖掘，似乎是 SweetAlert 的问题。
现在已经有一个 issue open 了很长一段时间来描述这个问题。 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
        })
});

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

Form input tab broken after ajax request

html

javascript

ajax

jquery

sweetalert