9

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

私が構築している Web アプリのポップアップ (ブートストラップ スタイル) モデルにいくつかのファイル アップロード機能を統合しようとしています。モデルの動作の一部として、エスケープが押された場合、モデルは閉じられます。

これは、開いているモデルからファイル入力ダイアログを開くまでは問題ありません。エスケープを押して入力ダイアログを閉じると、モデルも閉じます。

私が達成しようとしているものの非常に単純化されたバージョン http://jsfiddle.net/ckevy/1/

4

4 に答える 4

4

次のように解決してみてください。

ユーザーがファイル選択入力をクリックしたら、フォーカスを与えます$(el).focus()。

次に、ユーザーがESCを押すたびに、$（'：focus'）要素がファイル選択入力であるかどうかを確認します。その場合、その入力をblur（）し、モーダルを閉じません。最悪の場合–ユーザーがモーダルを閉じたいと思ってESCを押しても、何も起こりません[1]。「wtf」を考え、ESCをもう一度押すと、モーダルが適切に閉じます。ファイル選択入力がすべての可能な場合（入力のタブ移動など）でフォーカスされることを確認してください。サードパーティのアップローダーを使用していて、私が言ったことが機能しない場合は、そのアップローダーがファイル選択をどのようにラップするかを調べてください。カスタムリンクまたはボタン、およびさまざまな場合に実際にクリックイベントを受信するもの（たとえば、タブを押すと入力がイベントを受信する場合があり、クリックするとリンクである可能性があります）。全体として、これを私が説明した警告で機能させることは管理可能です。

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

blur()ファイル選択入力が必要な場合、すべてのケースを検出することはできません。クロスブラウザソリューションではありません。FFでさえ機能するために調整が必要です。私はWebkitでテストを行ってきましたが、他のブラウザーでは機能しない可能性があります。

于 2012-09-30T16:37:51.363 に答える
2

私の場合、このコードは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;
    }
});
于 2013-06-25T11:03:49.893 に答える
1

ダイアログ自体を実際に直接制御できるとは思いません。FFなどの一部のブラウザでは、ある程度ダイアログを操作できますが、これはすべてのブラウザとすべてのブラウザバージョンに適用されるわけではありません。

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

于 2012-07-25T10:13:36.707 に答える