Detectando si el diálogo de entrada de archivo está abierto

Question

¿Cómo puedo detectar si el diálogo de entrada de archivo está abierto actualmente?

Estoy tratando de integrar algunas funciones de carga de archivos en un modelo emergente (estilo de arranque) en una aplicación web que estoy creando. Como parte del comportamiento del modelo, si se presiona escape, el modelo se cierra.

Esto está bien hasta que abra un cuadro de diálogo de entrada de archivo desde el modelo abierto, si presiono escape para cerrar el cuadro de diálogo de entrada, también cerrará el modelo.

Una versión muy simplificada de lo que estoy tratando de lograr http://jsfiddle.net/ckevy/1/

Answer 1

Probar la solución de esta manera:

Cuando un usuario hace clic en la entrada de selección de archivos, darle el foco: $(el).focus().

Luego, cada vez que un usuario acceda a ESC, observe si el elemento $ (': focus') es la entrada de selección de archivos. En ese caso, desenfoque() esa entrada y no cierre el modal. Peor caso: el usuario quiere cerrar el modal, presiona ESC y no pasa nada [1]. Piensa "wtf", presiona ESC nuevamente y el modal se cierra como debería. Solo asegúrate de que la entrada de selección de archivos se enfoque en todos los casos posibles - tabulando a través de las entradas, etc. Si utilizas una herramienta de carga de terceros y lo que he dicho no funciona, investiga cómo la herramienta de subida ajusta la selección de archivos en un enlace o botón personalizado, y lo que en realidad recibe el evento de clic en diferentes casos (por ejemplo, cuando la pestaña, la entrada puede recibir el evento, al hacer clic, podría ser el enlace). En general, es manejable tener esto funcionando con la advertencia que he descrito.

Esto funciona con las -s demasiado ampliadas de manera similar (solo verifique que una selección no se enfoca cuando se toca ESC).

No podrá detectar todos los casos cuando necesite blur() la entrada de selección de archivo. No es una solución entre navegadores. Incluso FF necesita ajustes para trabajar. He estado probando en webkit con resultados positivos, en otros navegadores podría no funcionar.

Answer 2

no creo que realmente tiene control directo sobre el propio diálogo. En algunos navegadores como FF, las personas han podido manipular el diálogo en cierta medida, pero esto no se aplica a todos los navegadores y todas las versiones de navegador.

La forma más fácil de hacerlo es desactivar la tecla de método abreviado en el cuadro de diálogo del modelo antes de abrir la ventana del archivo.

Answer 3

En mi caso funciona este código en jQuery:

// esc must close popup 
$("body").keyup(function(e) { 
    if (27 == e.keyCode) { 
     hidepopup(); 
    } 
}); 

// input in popup 
var $file = $("input:file"); 
// keyup will be catched for input, not for body 
$file.bind("click", function(e) { 
    $(this).focus(); 
}); 
// keyup catching will be changed back to body after selecting file 
$file.bind("change", function(e) { 
    $(this).blur(); 
}); 
// we catched esc keyup, so change esc catching back to the body 
$file.keyup(function(e) { 
    if (27 == e.keyCode) { 
     $(this).blur(); 
     // i don't know, why it works with return false, because i am not js programmer), but cancelBubble or e.preventDefault is not working 
     return false; 
    } 
}); 

Answer 4

Sobre la base de la respuesta de Nikita. Si marca de enfoque en el campo de entrada antes de disparar su código que resuelve el problema:

$('input[type="file"]').on('keydown',function(e){ 

    //Prevents code from firing if file browser is open 
    if($(this).is(':focus')){ 

     //run code here that should only be applied when the dialog box is closed 

    } 

});