Question

我正在使用百里香创建一个下拉列表，如下所示：

<select id="userLevel" class="form-control" required>
    <option th:each="level : ${levels}" th:text="${level.description}" th:value="${level.id}">
</select>

添加由百里香产生的HTML如下：

<select id="userLevel" class="form-control" required="">
    <option value="0">Level 1</option>
    <option value="1">Level 2</option>
    <option value="2">Level 3</option>
    <option value="3">Level 4</option>
</select>

<div class="btn-group">
  <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected" aria-expanded="false">
    <span class="multiselect-selected-text">None selected</span> 
    <b class="caret"></b>
  </button>
  <ul class="multiselect-container dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(1px, 33px, 0px); top: 0px; left: 0px; will-change: transform;">
    <li><a tabindex="0"><label class="radio" title="Level 1"><input type="radio" value="0"> Level 1</label></a></li>
    <li><a tabindex="0"><label class="radio" title="Level 2"><input type="radio" value="1"> Level 2</label></a></li>
    <li><a tabindex="0"><label class="radio" title="Level 3"><input type="radio" value="2"> Level 3</label></a></li>
    <li><a tabindex="0"><label class="radio" title="Level 4"><input type="radio" value="3"> Level 4</label></a></li>
  </ul>
</div>

我遇到的问题是Tab键的行为不符合预期。我希望能够按一下Tab键以循环浏览表单中的每个元素，但是我只按了一次Tab键，然后将“ select”聚焦，然后再次将“ button”聚焦。

我尝试添加：

tabindex="-1"

添加到select元素，然后将其附加到“ select”和“ button”上，结果是：

<select id="userLevel" class="form-control" required="" tabindex="-1">
    ...
</select>

<div class="btn-group">
  <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected" aria-expanded="false" tabindex="-1">
    <span class="multiselect-selected-text">None selected</span> 
    <b class="caret"></b>
  </button>
  ...
</div>

然后使用Tab键完全跳过该元素。我希望在按下Tab键时选择一次“按钮”，而不是选择一次，因为按钮的格式正确，并且具有焦点时会突出显示。

任何帮助将不胜感激。

Answer 1

感谢@Alexandru，我发现了这个问题。

我还使用了正在生成div元素的插件“ bootstrap-multiselect.js”，以及正在生成select元素的Thymeleaf。

我删除了插件，现在一切都按预期工作-仅生成选择和选项，并且选项卡按钮按预期运行。

带有标签索引的Thymeleaf表单选择选项下拉列表

1 个答案: