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设置为false，然后添加一个函数

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

在使用“;”关闭 swal 函数之前，将 promise 与“then”函数一起使用，例如：.then(function(){。

使用您的代码，它将是这样的：

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

Answer 2

使用以下内容：

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

看这里：

Reference

Answer 3

我知道这是一个老话题，但我会为任何从谷歌搜索来到这里的人分享我的解决方案 :) 正如“limont”在 github 中所说： "在聚焦前一个活动元素之前引入了100ms的小延迟。原因可以在这里找到：Github"

还有来自“limonte”的 JsFiddle 可以帮助解决您的问题： complete example

这是我自己的代码 sn-p 有效：

        Swal({
            title: 'خطا...',
            text: 'لطفا یک شماره وارد کنید.',
            type: 'error',
            confirmButtonText: 'وارد کردن شماره',
            onAfterClose: () => {
                setTimeout(() => $("#Mobile").focus(), 110);
            }
        });

Answer 4

因此，将元素聚焦在 close 上。

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

Answer 5

我在 sweemalert 中听不懂 但是如果你打开一个模式，那么当你点击退出时，输入的焦点就会丢失

因此，如果您可以选择进行焦点操作（例如在回调函数中），请执行此操作。

Answer 6

Por la linea 227 de swetalert-dev.js encuentras este código y crea esta variable $(datafocus).focus();.

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

Y en tu html modifica así:

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

最后我使用 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"/>