キーボードナビゲーションを介して入力[タイプ=ファイル]を着目した場合、ブラウザの「ファイルの選択]ダイアログを表示
-
20-09-2019 - |
質問
タイトルが言うように、私は特定のinput
は、フォームフィールド(キーボードナビゲーションを使用して)を介してタブ移動によってフォーカスを取得したときに開くように「ファイルの選択]ダイアログをしたいです。デフォルトでは、 'ファイルを選択]ウィンドウが唯一のフィールドがクリックされたときに開くます。
私はこの問題のためにJSビンにページを設置: http://jsbin.com/areba/edit の
現在、このページには、次のコードで構成されています:
<!doctype html>
<html>
<head>
<title>Sandbox</title>
<meta charset="utf-8">
</head>
<body>
<form>
<input type="text">
<input type="file">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function() {
$('input[type=text]').focus(function() {
$(this).next('input[type=file]').css('background', 'lime').trigger('click');
});
});
</script>
</body>
</html>
あなたが見ることができるように、テキスト入力やファイルの入力があります。アイデアは、テキスト入力がフォーカスを受け取ったときに、ファイルの入力を取得する「クリック」または「選択ファイル」ウィンドウが開き何でもしていることである。
.css('background', 'lime')
ステートメントが正常に動作するようです。ただし、ファイルの入力に.trigger('click')
を呼び出すと、まったく何もしないようです。
(私は、これは、アクセシビリティの問題を引き起こす可能性があります実現するので、のは、それを議論しないようにしましょうください。ありがとうございました。)
解決
彼らはファイルアップロード要素のクリック()イベント実装していないとして、
これは、IEとSafari(と思う)ではなく、オペラやFirefoxで動作します - 編集を:。まだ
他のヒント
私はあなたがセキュリティ上の理由のためのダイアログをアクティブに行うことができることはないだろう。実際のクリックイベントは、ブラウザによっては、起こることがある。
私には、Flash / Flexがこの要件を持って知っています。
所属していません StackOverflow