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

在使用＆＃34;;＆＃34;关闭swal之前使用select ol.* from (select owner, count(distinct letter ) as cnt, rank() over (order by count(distinct letter) desc) as seqnum from t group by owner ) ol where seqnum = 1;。

使用您的代码，就像那样：

.then(function(){

Answer 2

使用以下内容：

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

见这里：

Reference

Answer 3

因此请将元素集中在close。

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

Answer 4

我在sweemalert不明白但是，如果你打开一个模态，那么当你点击退出

时，输入的焦点就会丢失

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

Answer 5

Por la linea 227 de swetalert-dev.js encuentrasestecódigoycrea 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 htmlmodificaasí：

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

我知道这是一个老话题，但是我向所有来自google搜索的人分享我的解决方案:) 正如“ limont”在github中说的： “在聚焦前一个有源元件之前引入了100ms的小延迟。原因可以在这里找到：Github”

“ limonte”中的JsFiddle帮助解决您的问题： complete example

这是我自己的有效代码段：

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

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

SweetAlert，确认后关注输入

7 个答案: