Cómo interceptar el evento clave de jQuery Dialog ESC?

Tengo un diálogo de jquery modal y otro elemento que toma el evento clave ESC detrás del cuadro de diálogo. Cuando el cuadro de diálogo jQuery está activo, no quiero que se propague este evento clave ESC. Lo que sucede ahora es que cuando hago clic en ESC, cierra el cuadro de diálogo y activa el controlador de eventos ESC en el elemento de fondo.Cómo interceptar el evento clave de jQuery Dialog ESC?

¿Cómo puedo comer el evento clave ESC cuando se descarta un cuadro de diálogo jQuery?

Fuente

2012-05-05 louis.luo

opción

Internamente de diálogo de jQuery UI closeOnEscape se implementa mediante la fijación de un oyente keydown al propio documento . Por lo tanto, el cuadro de diálogo se cierra una vez que el evento de pulsación de teclas se ha borrado hasta llegar al nivel superior.

Así que si desea seguir usando la tecla de escape para cerrar el cuadro de diálogo, y desea evitar que la clave de escape se propague a los nodos principales, deberá implementar la funcionalidad closeOnEscape usted mismo y utilizar el el método stopPropagation en el objeto de evento (ver MDN article on event.stopPropagation).

(function() { 
    var dialog = $('whatever-selector-you-need') 
    .dialog() 
    .on('keydown', function(evt) { 
     if (evt.keyCode === $.ui.keyCode.ESCAPE) { 
      dialog.dialog('close'); 
     }     
     evt.stopPropagation(); 
    }); 
}());

Lo que hace es escuchar todos los eventos de pulsación que se producen dentro del cuadro de diálogo. Si la tecla presionada fue la tecla de escape, cierra el diálogo de la forma habitual, y no importa lo que ocurra con la llamada evt.stopPropagation, la tecla de selección no se propagará hasta los nodos principales.

Tengo un ejemplo en vivo que muestra esto aquí - http://jsfiddle.net/ud9KL/2/.

Fuente

2012-05-06 12:38:06

Gracias. Esto funciona. –

esto no funciona, agregué una alerta simple en su jsfiddle dentro de la función de teclado y nunca se llama :( – Yasser

Desafortunadamente closeOnEscape no funciona para mí. Pero este enlace hizo el truco. –

Debería modificar el código de su elemento detrás del diálogo para ver si el diálogo estaba abierto Y se presionó la tecla Escape e ignorar esa situación.

Fuente

2012-05-05 23:14:50 j08691

Gracias por la respuesta. Pero la cuestión es que, cuando presiono ESC, el evento va primero al diálogo y descarta el diálogo. Solo entonces va a mi elemento de fondo, que en ese momento descubrirá que el diálogo no está allí y tomará el evento ESC. –

¿Qué hay de eliminar el oyente del elemento de fondo cuando se abre el cuadro de diálogo y luego volver a conectarlo una vez que se cierra el cuadro de diálogo? – j08691

Supongo que funcionará, pero ¿no sería un poco hacky? ¿Habrá una forma menos hacky de hacerlo? –

Es necesario closeOnEscape ...

código Ejemplo:

$(function() { 
$("#popup").dialog({ 
height: 200, 
width: 400, 
resizable: false, 
autoOpen: true, 
modal: true, 
closeOnEscape: false 
}); 
});

Ver en directo: http://jsfiddle.net/vutdV/

Fuente

2012-05-05 23:27:16 andyderuyter

No dijo que quiere que el diálogo no se cierre al escapar, dijo que no quiere que el otro elemento que escucha el escape lo ignore si el diálogo está abierto. Su camino eliminaría la funcionalidad de cerrar el cuadro de diálogo presionando escape. – j08691

Tienes un punto ahí. Edité las etiquetas de estilo, por lo que todavía hay un enlace "cercano" disponible. http://jsfiddle.net/vutdV/1/ Todavía no es la solución final de hecho. – andyderuyter

Puede utilizar los siguientes

$(document).keyup(function (e) { 
     if (e.keyCode == 27) { 

      $('#YourDialogID').dialog('close') 
     } 
    });

Fuente

2013-11-18 11:30:16 Adel

Cómo interceptar el evento clave de jQuery Dialog ESC?

Respuesta

Cuestiones relacionadas