0

前の選択フィールドの値が特定の値に設定されている場合にのみ表示される選択フィールドを含むフォームがあります。国として "USA" が選択されている場合、非表示の "states" 選択フィールドが表示される簡略化されたバージョンを次に示します。

HTML:

<style>
  label {
    display:inline-block;    
    min-width:100px;        
    padding:3px;
  }
  .hidden{
    display:none;
  }
</style>

<div>
  <label for="country">Country</label>
  <select id="country">
    <option>Czech Republic</option>
    <option>USA</option>
  </select>
</div>
<div id="stateContainer"  class="hidden">
  <label for="state">State</label>
  <select id="state">
    <option>Alabama</option>
    <option>Arizona</option>
    <option>Arkansas</option>
  </select>
</div>
<div>
  <label for="name">Name</label>
  <input type="text" id="name" />
</div>

JS:

$(function(){
  $("#country").on("change",function(){
    if ( $(this).val() === "USA") {
      $("#stateContainer").removeClass("hidden");
    } else {
      $("#stateContainer").addClass("hidden");
    }
  })
})

...そしてここにJSFiddleがあります：

http://jsfiddle.net/xoundboy/a2HdZ/5/

マウスを使用する場合は問題なく動作しますが、ユーザーがキーボード入力のみに制限されている場合、UX が壊れます。フォーカスが国フィールドにあり、上/下矢印を使用して国として「USA」を選択し、次にタブ キーを使用して次のフィールドに移動すると、これを確認できます。新しく表示された「状態」フィールドに移動する代わりに、「名前」フィールドにスキップします。

おそらくJSでタブキーの押下をキャプチャし、新しく表示されたフィールドにフォーカスを強制し、デフォルトの動作を防ぐことで修正できますが、それは醜いハックのようです. 非常に一般的なシナリオを処理するためのベスト プラクティスは何ですか?

4

2 に答える 2

1

上下キーを押しても変更イベントは発生しません。そのためchange、キーを押したときにイベントをトリガーできます。

コード変更のjs フィドルの例。それが役に立てば幸い。

EDIT 1 さまざまなブラウザーで確認したところ、この問題は Firefox にあるため、解決策は Firefox であることがわかりました。クロムの場合、問題のフィドルは私にとって完全にうまく機能します。

EDIT 2 私の以前のフィドルはchangeでトリガーされましたkeypress。Firefoxが何かを変更したようで、機能しなくなりました。にイベントを更新しましたkeyup。

于 2013-07-28T09:39:07.937 に答える
0

tabindex要素プロパティを使用するだけで、タブオーダーは最低値から最高値へ

フィドル

<div>
  <label for="country">Country</label>
  <select id="country" tabindex=1>
    <option>Czech Republic</option>
    <option>USA</option>
  </select>
</div>
<div id="stateContainer"  class="hidden">
  <label for="state">State</label>
  <select id="state" tabindex=2>
    <option>Alabama</option>
    <option>Arizona</option>
    <option>Arkansas</option>
  </select>
</div>
<div>
  <label for="name">Name</label>
  <input type="text" id="name" tabindex=3 />
</div>
于 2013-07-28T09:38:23.090 に答える