Question

让我们看一段像这样的代码：

<article>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
</article>

我想使用<p>键对这些tab进行迭代，并用CSS（轮廓或其他标记）标记当前选择的<p>。我试图将tabindex添加到<p> -s中，但似乎不起作用。

我的问题是：

是否可以通过这种方式迭代非输入/链接元素？
如果可能，捕获当前元素的伪类是什么？
奖金：能否将迭代保留在<article>内？我希望迭代跳到最后一个之后的第一个<p>，反之亦然。

纯HTML / CSS解决方案会更好，但我对JS也很好。

Answer 1

使用tabindex="0"到p，并在CSS :focus中使用background:red;和 width:fit-content; 以仅将background放入text内部

也使用 onmousedown="return false;"来防止鼠标点击focus

p:focus{
background:red;
width:fit-content;
}

<article>
    <p onmousedown="return false;" tabindex="0">some text</p>
    <p onmousedown="return false;" tabindex="0">some text</p>
    <p onmousedown="return false;" tabindex="0">some text</p>
    <p onmousedown="return false;" tabindex="0">some text</p>
    <p onmousedown="return false;" tabindex="0">some text</p>
</article>

Answer 2

是否可以通过这种方式迭代非输入/链接元素？

是的，使用tabindex可以很好地解决此问题。

如果可能的话，捕获当前元素的伪类是什么？

是的，您可以将CSS :focus规则用于轮廓：

p:focus {
  border: 1px solid #ddd;
}

<article>
    <p tabindex="0">some text</p>
    <p tabindex="0">some text</p>
    <p tabindex="0">some text</p>
    <p tabindex="0">some text</p>
    <p tabindex="0">some text</p>
</article>
This input isn't in the tab order:
<input type="text" tabindex="-1">

（{tabindex="0"根据元素在文档顺序中的位置将其置于选项卡顺序。或者，当然，可以按您自己的顺序为其分配。）

如果默认情况下您具有按Tab键顺序排列的元素，并且不希望它们按Tab键顺序排列，则可以使用tabindex="-1"将其从其中删除。但是，出于可访问性原因，我不建议这样做。上面的input证明了这一点。

奖励：是否可以将迭代保留在内？我希望迭代跳到最后一个之后的第一个

，反之亦然。

我认为您不能以这种方式来限定范围，而不必将这些内容设置为页面上仅仅标签的元素，或者在离开最后一个时使用JavaScript来捕获它他们，并再次明确地关注第一个（我怀疑这会导致UX问题）。

Answer 3

选择文章中的所有p。将其tabIndex设置为0。然后在窗口上添加一个事件侦听器。如果您文章中的最后一个p是焦点，那么下一个焦点元素将是p列表的第一个元素。

const ps = document.querySelectorAll('article > p');

ps.forEach((p)=>p.tabIndex=0);
ps[0].focus();
window.addEventListener("keydown", function(e){
  const code = e.keyCode;
  if(code === 9 && ps[ps.length-1] === document.activeElement){
    ps[0].focus();
    e.preventDefault();
  }
}, false);

p:focus {
  border: 1px solid black;
}

<article>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
</article>

使用制表符（HTML）遍历子级

3 个答案: