ファイル入力ダイアログが開いているかどうかの検出

Question

ファイル入力ダイアログが現在開いているかどうかを検出するにはどうすればよいですか？

ビルドしているWebアプリケーションのポップアップ（ブートストラップスタイル）モデルにファイルアップロード機能を統合しようとしています。モデルの動作の一部として、エスケープが押されると、モデルは閉じられます。

オープンモデルからファイル入力ダイアログを開くまではこれがすべて有効です。エスケープを押して入力ダイアログを閉じると、モデルも閉じられます。私が達成しようとしているものの

A超簡易版 http://jsfiddle.net/ckevy/1/

Answer 1

はこのようにそれを解決してみてください。

ユーザがファイル選択入力をクリックすると、それがフォーカスを：$(el).focus()を。

次に、ユーザーがESCを押すたびに、$（ '：focus'）要素がファイル選択入力かどうかを調べます。その場合、モーダルを入力して閉じないblur（）。最悪の場合 - ユーザーがモーダルを閉じたいと思ってESCを押しても何も起こらない[1]。 "wtf"と思って、ESCをもう一度押し、モーダルは必要に応じて閉じます。可能性のあるすべてのケースでファイル選択入力にフォーカスが当てられていることを確認してください - 入力によるタブ移動など。サードパーティーのアップローダを使用していて、うまくいきません - そのアップローダがファイルセレクションをどのようにラップするかを見てくださいカスタムリンクやボタン、実際にクリックイベントを受信するケース（タブをタップすると、入力がイベントを受け取る可能性があります。クリックするとリンクになる可能性があります）。全体的に、これは私が記述した警告と一緒に働くことは管理しやすいです。

これは、-sも同様に機能します（ESCがヒットしたときにselectがフォーカスされていないことを確認してください）。

blur()ファイル選択入力が必要な場合は、すべてのケースを検出することはできません。それはクロスブラウザソリューションではありません。 FFでも調整が必要です。私は肯定的な結果をWebkitでテストしていますが、他のブラウザでは動作しない可能性があります。私の場合は

Answer 2

私はあなたが実際に対話自体を直接制御を持っていると信じていません。 FFなどの一部のブラウザでは、ダイアログをある程度操作することができましたが、これはすべてのブラウザとすべてのブラウザのバージョンには当てはまりません。

これを行う最も簡単な方法は、ファイルウィンドウを開く前にモデルダイアログでショートカットキーを無効にすることです。

Answer 3

は、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

。

$('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 

    } 

});