javascript - 如何在html中编写一个可以使用tab键浏览的可编辑有序列表

Question

我想创建一个有序列表 (HTML)，您可以在其中编辑每个列表项的内容，同时您可以使用 Tab 键在每个列表项之间切换。

我知道 contenteditable 属性，但它不能解决我的跳格问题。

这张图片让您了解它的外观:

这是我目前拥有的:

<div id="roster">
  <ol contenteditable="true">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>
 </div>

看起来像这样:

当我按下 tab 键时，整个部分(有序列表)失去焦点并跳转到下一个 html 元素。

你能告诉我如何编写一个看起来像我需要的并且可以访问的代码吗。

Answer 1

可能是 <input type="text"> 的列表元素就可以了。它们可以被编辑，保留它们的值，并且在默认情况下，标签激活:

    <div id="roster">
      <ol>
        <li><input type="text" value="Foo"></li>
        <li><input type="text" value="Bar"></li>
        <li><input type="text" value="Baz"></li>
        <li><input type="text" value="Qux"></li>
      </ol>
    </div>

您可以使用 CSS 禁用输入的默认边框。