ウェブページの任意の場所をクリックして選択ドロップダウンを開きます

Question

私はモバイルデバイス（特にブラックベリー）で表示されるWebページを構築しています。私は、ページの左上隅にある選択>のようなナビゲーションドロップダウンを実装しています。ユーザーがドロップダウンを直接クリックする必要があるのではなく、ユーザーがページ上の任意の場所をクリック/タップすることができ、左上隅の選択ドロップダウンが開きます。ページには、左上の選択ドロップダウン以外のリンクやクリック可能なオブジェクトはありません。

これも可能ですか？私が今までに見つけたことから、プログラマチックに<select>ドロップダウンを開くことは不可能だと思われますが、私はこの特定のケースをそこに投げ捨てると考えました。

Answer 1

JavaScriptを使ってキープレスを偽装することはできません（セキュリティ上の理由から正当な理由で）、最も近いのは<select>要素のサイズを変更することです（ドロップダウンコントロールからリストボックスコントロールに変更して戻します）。

Demo、Code（純粋なJS、無ライブラリー）

ユーザーがクリック（またはタップ）でオプションを選択すると、それ、クリックイベントハンドラは、 '閉じ'リストボックスのサイズを1に戻してから、通常のドロップダウンコントロールに戻ります。私は（モバイルではない）Chromeでこれをテストしただけで、Blackberryで動作するかどうかを教えてください。

編集：私はより分かりコントロールに振る舞いと設定をラップ小さなjQueryプラグインを作成している

。私はiOS 4のSafari Mobileでこれをテストしていますが、プログラムで開くことができるという点を除いて、ブラウザの通常のドロップダウンのように動作します。

Demo、Code（jQueryの1.7）

それはこのように動作します：

$("select").openable({ triggers: $("#trigger") }); 

任意のトリガでクリックすると、選択UIを開きます。

私はまたが「閉じる」リストボックスに、Escキーとスペースを入力キャッチするキーアップイベントのハンドラを追加しました。これは、デスクトップブラウザでのドロップダウンコントロールの選択メカニズムを模倣しています。

もちろん、デスクトップブラウザでは、これはネイティブのドロップダウンコントロールとは異なり、ページのレイアウトを変更します。あなたはそのためのCSSソリューションを用意しなければなりません（おそらくposition: absoluteとz-indexというものがあります）。しかし、iOSでは選択UIがページに表示されないので、問題はありません。再び

、BlackBerryでこのプラグインをテストしていません...