0

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

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 就会被破坏。如果焦点位于国家/地区字段中，您可以看到这一点，并且您使用向上/向下箭头选择“美国”作为国家，然后使用 Tab 键移动到下一个字段。它没有移动到新显示的“状态”字段，而是跳到“名称”字段。

我可能可以通过在 JS 中捕获 tab 键来修复它，将焦点强制到新显示的字段上并防止默认行为，但这似乎是一个丑陋的 hack。处理必须非常常见的情况的最佳实践是什么？

4

2 回答 2

1

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

js小提琴示例代码更改。希望能帮助到你。

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

编辑 2 我之前的小提琴change触发了keypress. 似乎firefox改变了一些东西，它不再起作用了。我已将活动更新为keyup.

于 2013-07-28T09:39:07.937 回答
0

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

小提琴

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