Question

我有一个包含select字段的表单，该字段仅在前一个select字段的值设置为特定值时显示。这是一个简化版本，如果选择“USA”作为国家/地区，则会显示隐藏的“州”选择字段：

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”作为国家/地区，然后使用Tab键移动到下一个字段。它不会移动到新显示的“状态”字段，而是跳到“名称”字段。

我可以通过捕获JS中的Tab键按下来强制解决它，强制将焦点放在新显示的字段上并防止默认行为，但这看起来像是一个丑陋的黑客行为。处理必须非常常见的情况的最佳做法是什么？

Answer 1

按下向上/向下键时不会触发更改事件。因此，可以在按键时触发change事件。

js fiddle代码更改的示例。希望它有所帮助。

编辑1 我检查了不同的浏览器，发现这个问题是在Firefox中，因此解决方案是针对Firefox。对于铬合金来说，这个小提琴对我来说非常合适。

编辑2 我之前的小提琴change触发了keypress。似乎firefox改变了一些事情，它没有更多的工作。我已将活动更新为keyup。

Answer 2

只需使用tabindex元素属性，Tab键顺序从最低值到最高值

Fiddle

<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>

HTML表单可访问性：选项卡键焦点跳过新显示的字段

2 个答案: