Sweetalert: La tecla de tabulación no funciona después de abrir dos Modales de alerta dulce seguidos

Creado en 15 oct. 2014  ·  20Comentarios  ·  Fuente: t4t5/sweetalert

Hola,

Parece que cuando el cuadro de diálogo SweetAlert abre otro después de que está hecho, la tecla de tabulación deja de funcionar, todas las demás pulsaciones están bien.

Puede recrear esto usando el ejemplo en http://tristanedwards.me/sweetalert.

Este en concreto:

swal({      title: "Are you sure?",   
            text: "Your will not be able to recover this imaginary file!",   
            type:  "warning",   
            showCancelButton: true,   
            confirmButtonColor: "#DD6B55",   
            confirmButtonText: "Yes, delete it!",   
            cancelButtonText: "No, cancel plx!",   
            closeOnConfirm: false,   
            closeOnCancel: false }, 
            function(isConfirm){  
                 if (isConfirm) {     
                 swal("Deleted!", "Your imaginary file has been deleted.", "success");  
                 } else {     
                 swal("Cancelled", "Your imaginary file is safe :)", "error");   
                 } });

Creo que está copiando el manejo de pulsaciones de teclas del modal anterior, específicamente en la función closeModal (), esta parte:

 // Reset the page to its previous state
    window.onkeydown = previousWindowKeyDown;
    document.onclick = previousDocumentClick;
    if (previousActiveElement) {
      previousActiveElement.focus();
    }

¿Quizás simplemente se está enfocando en el modal anterior y volviendo a registrar su keydown y onclick?

help wanted

Comentario más útil

Para implementar la solución de @jayquest sin cambiar la biblioteca, utilicé el siguiente código:

var previousWindowKeyDown = window.onkeydown;
tragar ({
title: '¿Estás seguro?',
closeOnConfirm: falso,
closeOnCancel: falso
}, función (isConfirm) {
window.onkeydown = previousWindowKeyDown;
if (isConfirm) {
swal ('¡Eliminado!', 'Su archivo imaginario ha sido eliminado.', 'éxito');
} más {
swal ('Cancelado', 'Su archivo imaginario está seguro :)', 'error');
}
});

Todos 20 comentarios

En ese ejemplo, no puedo ver que lo que estás diciendo sea cierto,
Debido a que la tecla 'tabulador' simplemente se mueve entre los botones,
cuando obtengo el segundo modal, solo tengo un botón, por lo que no importa cuánto presione el botón de pestaña, siempre permanecerá en el único botón que tiene.

¡Siento no haberlo dejado claro!

Sí, está tabulando EN el modelo, pero después de cerrar el segundo modal, pierde la capacidad de navegar por la página web con la tecla de tabulación (no hay modales en la pantalla solo en la página web).

Intenté una solución en sweetalert @ issue127 . Parece funcionar en la medida en que el foco vuelve al botón de la página.

Sin embargo, revela otro problema: aún no puede pasar a otro botón, y cuando presiona Enter para mostrar la alerta nuevamente, las cosas se ponen raras.

Sí, intenté una solución similar a la suya, pero con una variable global de ventana para asegurarme de que sea un elemento del sitio web que no sea SweetAlert, enfoca el elemento en el documento, pero la tecla Tab aún no funciona.

Lo que parece haberlo solucionado por ahora es la eliminación de stopEventPropagation (e) en la cláusula if (keycode == 9) en el método handleKeyDown . Pero supongo que esto tiene otros efectos secundarios ...

Le mostraría una confirmación, pero también hice algunos otros cambios en la biblioteca que otros podrían no querer.

Entonces, en caso de que alguien quiera una solución temporal para este error, aquí hay un repositorio que obtuve de este proyecto: https://github.com/heero-yuy/sweetalert.git

Funciona al 100% para todos mis proyectos hasta ahora, pero no lo he probado extensamente para asegurarme de que mis cambios no rompan ninguna otra funcionalidad.

Lo arreglé insertando las dos líneas de código de arriba al comienzo de la función sweetAlert o swal en la línea 215, no sé si es la mejor solución, pero funciona para mí.

/*
 * Global sweetAlert function
 */
var sweetAlert, swal;

sweetAlert = swal = function() {

    if(previousWindowKeyDown !== undefined && window.onkeydown !== previousWindowKeyDown)`
        window.onkeydown = previousWindowKeyDown;

: +1:. Esto debería tener alguna prioridad.

La solución de @jayquest parece funcionar.

Para implementar la solución de @jayquest sin cambiar la biblioteca, utilicé el siguiente código:

var previousWindowKeyDown = window.onkeydown;
tragar ({
title: '¿Estás seguro?',
closeOnConfirm: falso,
closeOnCancel: falso
}, función (isConfirm) {
window.onkeydown = previousWindowKeyDown;
if (isConfirm) {
swal ('¡Eliminado!', 'Su archivo imaginario ha sido eliminado.', 'éxito');
} más {
swal ('Cancelado', 'Su archivo imaginario está seguro :)', 'error');
}
});

Para expandir la solución de

(function (){

    var _swal = window.swal;

    window.swal = function(){

        var previousWindowKeyDown = window.onkeydown;

        _swal.apply(this, Array.prototype.slice.call(arguments, 0));

        window.onkeydown = previousWindowKeyDown;

    };

})();

¡También puedo confirmar este error y la solución anterior también funciona bien! : +1:

¡Sí, la solución alternativa de @JustinWinthers funciona bien!

sin embargo, parece f-up usando las teclas de escape e ingresar en el cuadro de diálogo

La solución alternativa de @amoralidad funcionó para mí. ¡Gracias!

gracias @jayquest ... @ t4t5 ¡ por favor arregle esto en la rama maestra!

Acabo de enviar una solicitud de extracción con mi solución. https://github.com/t4t5/sweetalert/pull/547

@JustinWinthers , el uso de su código rompe el type: 'input' . Al intentar hacer clic en el botón "Cancelar" para cerrar el cuadro de diálogo, dice swal.showInputError is not a function .

Por ejemplo, vaya a http://clubcare.no/dashboard y toque Glemt passord (contraseña olvidada)

Eliminar su función hace que vuelva a funcionar. ¿Alguna idea sobre cómo deshacerse de este comportamiento? ¡Gracias!

@jayquest Gracias por solucionar este problema.

Hola @JustinWinthers

Intenté tu sugerencia para solucionar este problema de tabulación después de que se abre SweetAlert. Solucionó el problema, sin embargo, comencé a recibir este error cuando intento cerrar Sweetalert usando swal.close(); cuando se hace clic en el botón cancel :

swal.close is not a function

Esto es similar a lo que dijo @EduardJS anteriormente. ¿Hay alguna forma de hacer que funcionen? Siento que nos acercamos mucho, pero debido a este error, tuve que eliminar el código sugerido. Cualquier ayuda será genial.

Salud,
Neel.

La solución más simple posible basada en la solución alternativa de @JustinWinthers que pude encontrar (sin modificar la biblioteca), es conectar solo a la función swal.close y configurar window.onkeydown en el window.onkeydown controlador de eventos:

(function (){
    var close = window.swal.close;
    var previousWindowKeyDown = window.onkeydown;
    window.swal.close = function() {
        close();
        window.onkeydown = previousWindowKeyDown;
    };
})();

o en mi caso aún más simple:

(function (){
    var close = window.swal.close;
    window.swal.close = function() {
        close();
        window.onkeydown = null;
    };
})();

Con esta solución alternativa, ahora también es posible utilizar las teclas Intro y Escape en el cuadro de diálogo.

Los mensajes de error mencionados por @ Mr-Anonymous y @EduardJS tampoco ocurren más.

@kosst Perfecto. Muchas gracias por compartir eso. Probé tu código y funciona perfecto. ¡¡Muchas gracias!!

Salud,
Neel.

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

daftspunk picture daftspunk  ·  4Comentarios

Lusitaniae picture Lusitaniae  ·  4Comentarios

vmitchell85 picture vmitchell85  ·  6Comentarios

adiwithadidas picture adiwithadidas  ·  4Comentarios

voodoo6 picture voodoo6  ·  4Comentarios