Flexbox 顺序和标签导航

Question

我想使用display: flex来更改带有line类的 div的顺序，但我想保持这个 TAB 导航顺序： A ? 乙？C ？D.

正如您在片段中看到的，第一个示例工作正常（DOM 序列与 Order 相同），但在第二个示例中，选项卡遵循 DOM 序列。

有机会不使用javascript吗？

.container {
  display: flex;
  flex-direction: column;
}

.line {
  padding: 5px;
  border: 1px solid gray;
  margin-bottom: 5px;
}

.line span {
  margin-left: 7px;
}

<h2>
  Tabbing navigation OK
</h2>
<div class="container">
  <div class="line" style="order: 1;"><input value="A"><span>1st div - Order: 1</span></div>
  <div class="line" style="order: 2;"><input value="B"><span>2nd div - Order: 2</span></div>
  <div class="line" style="order: 3;"><input value="C"><span>3rd div - Order: 3</span></div>
  <div class="line" style="order: 4;"><input value="D"><span>4th div - Order: 4</span></div>
</div>

<h2>
  Tabbing navigation KO
</h2>
<div class="container">
  <div class="line" style="order: 1;"><input value="A"><span>1st div - Order: 1</span></div>
  <div class="line" style="order: 4;"><input value="C"><span>2nd div - Order: 4</span></div>
  <div class="line" style="order: 3;"><input value="C"><span>3rd div - Order: 3</span></div>
  <div class="line" style="order: 2;"><input value="B"><span>4th div - Order: 2</span></div>
</div>

JSFiddle 链接在这里。

提前致谢

Answer 1

目前没有通过 css 改变视觉顺序的好方法，无论是通过使用 flex 还是浮动内容并仍然保持 Tab 键顺序。

当页面上有许多其他字段时分配 tabindex 属性会导致不应存在的维护问题。Opera 应该在页面上的项目流时分配标签索引，目前没有其他浏览器这样做。

Answer 2

您可以使用tabindexhtml 属性

.container {
  display: flex;
  flex-direction: column;
}

.line {
  padding: 5px;
  border: 1px solid gray;
  margin-bottom: 5px;
}

.line span {
  margin-left: 7px;
}

<h2>
  Tabbing navigation OK
</h2>
<div class="container">
  <div class="line" style="order: 1;"><input value="A"><span>1st div - Order: 1</span></div>
  <div class="line" style="order: 2;"><input value="B"><span>2nd div - Order: 2</span></div>
  <div class="line" style="order: 3;"><input value="C"><span>3rd div - Order: 3</span></div>
  <div class="line" style="order: 4;"><input value="D"><span>4th div - Order: 4</span></div>
</div>

<h2>
  Tabbing navigation KO
</h2>
<div class="container">
  <div class="line" style="order: 1;"><input value="A" tabindex="1"><span>1st div - Order: 1</span></div>
  <div class="line" style="order: 4;"><input value="C" tabindex="4"><span>2nd div - Order: 4</span></div>
  <div class="line" style="order: 3;"><input value="C" tabindex="3"><span>3rd div - Order: 3</span></div>
  <div class="line" style="order: 2;"><input value="B" tabindex="2"><span>4th div - Order: 2</span></div>
</div>