要素のキー入力検索によるドロップダウン

Question

このトリッキーな状況から抜け出すための貴重な提案と指導が必要です。

私は、以下のようなドロップダウンを構築する必要があるシナリオを持っています。

<ul class="dropdown"> 
<li><a href="#">America</a></li> 
<li><a href="#">Brazil</a></li> 
<li><a href="#">China</a></li> 
<li><a href="#">Denmark</a></li> 
<li><a href="#">Egypt</a></li> 
</ul> 

目的の機能は、私が項目をスクロールするためにキーボード入力を使用することができるはずということです、私はそれがエジプトに焦点を当てる/ホバーする必要があり、私のキーボード上のキー「E」を押し言うことができます。

私はこの機能がUL> Liを使って実現できないことを認識していますが、この機能を実装するにはSelectタグを使用できます。

<select class="dropdown"> 
<option>America</li> 
<option>Brazil</li> 
<option>China</li> 
<option>Denmark</li> 
<option>Egypt</li> 
<select> 

しかし、我々は選択したタグを使用する場合、我々は、特に最もbroswers上のselectタグのドロップダウン上のCSSのパディングdoesntの仕事のように、ドロップダウンのスタイルを設定することはできません。

私がしたいすべてが、私はこれらの3つの機能でドロップダウンを構築することができますどのように、あるに尋ねる：私はこのオンラインのための解決策を見つけるために十分な時間を過ごしました

1.Open on Tab key press 
2.Browse listed items using key input. 
3.Style the dropdown for cross broswer compatibility. 

、私は離れて任意の完璧な解決策を見つけるDINT

https://silviomoreto.github.io/bootstrap-select/

このプラグインから、私は私が私があるブートストラップ、jQueryの、Javascriptを使用することを許可しています。このツールのみを達成work.Toで任意の外部プラグインを使用することはできませんよと言って後悔すると思い、 CSS、HTML、および斜め使用角度。

誰でも私にこれを手伝ってもらえますか？

Answer 1

残念ながら、<select>のプルダウンをすべてのブラウザで一貫してスタイル設定することはできません。 Bootstrap Selectや他の同様のプラグイン（たとえばChosen）ではJSやカスタムマークアップを使用してアクセシビリティに悪い<select>を作成します（https://vimeo.com/84970341#t=614s参照）。

個人的には、<select>要素を使用して、デフォルトのブラウザスタイルで使用します。

<select>のスタイルは、アクセシビリティを損なうことなく、自分自身を切り替えることができます。ちょうどドロップダウンではありません。ここではいくつかの例があります：http://adam.co/lab/jquery/customselect/

http://www.456bereastreet.com/lab/custom-select/

• 別のオプションは、リンクのリストとして国をコーディングし、JSでそれを拡張可能にすることができます。適切なアリアの役割を必ず追加してください。
  • http://edenspiekermann.github.io/a11y-toggle/
  • http://heydonworks.com/practical_aria_examples/

Answer 2

1。タブキーを押して開く

タブキーulのタブキーを押すと、タブキーもウィンドウ内のさまざまな機能を実行するため、非常に悪い解決策です。フォーカスがウィンドウ上になければならないので、ドロップダウントグルはバギーになります。 selectのような要素inputを使用している場合は、それは完全にうまくいきます。

まだ外部ライブラリを使用することはできないので、私はちょっとしたモックアップを作成しました。 ulを使用して作成されます。 JS Fiddle

HTML：：

<div> 
    <ul id="dropdown"> 
    <li class='highlight' data-key='A'><a href="#">America</a></li> 
    <li data-key='B'><a href="#">Brazil</a></li> 
    <li data-key='C'><a href="#">China</a></li> 
    <li data-key='D'><a href="#">Denmark</a></li> 
    <li data-key='E'><a href="#">Egypt</a></li> 
    </ul> 
</div> 

CSS：

ul { 
    list-style: none; 
    display: none; 
} 

ul li.highlight { 
    background: yellow; 
} 

Javascriptを：

document.addEventListener("keydown", keyDownListener, false); 

function keyDownListener(e) { 
    var keyCode = e.keyCode; 
    var dropdwn = document.getElementById('dropdown'); 
    if (keyCode == 9) { 
    dropdwn.style.display = (dropdwn.style.display != 'none' ? 'none' : 'block'); 
    } else if (dropdwn.style.display != 'none') { 
    var items = dropdwn.getElementsByTagName("li"); 
    items[0].classList.remove("highlight"); 
    for (var i = 0; i < items.length; ++i) { 
     var aKey = items[i].dataset.key; 
     if (String.fromCharCode(e.keyCode) === aKey) { 
     for (var j = 0; j < items.length; ++j) { 
      items[j].classList.remove("highlight"); 
     } 
     items[i].classList.add("highlight"); 
     } 
    } 
    } 
} 

このバイオリンを見てください

説明：

1. 、ドキュメント上​​イベントリスナーを追加します。
2. Tabのキーを押して、ドロップダウンを表示/非表示にします。
3. 他のいずれかのキーを押すと、ドロップダウンが表示されている場合、の各liをチェックし、押されたキーと一致させます。一致する場合は、それぞれのリスト項目を強調表示します。

そして再びリマインダー、Tabキーを押し上ulドロップダウンのトグルは、アクセシビリティを痛いです。それがselectの場合、それは問題ありません。