使用上/下箭头浏览HTML表单

Question

我有一个表单，其中的输入元素表示键值对。
当用户希望在页面内动态生成这些输入元素时。

该表格看起来像这样：


这是一行的示例代码，由两个输入元素组成：

<tr id='1523459952424.153'>
 <td class='w50'>
  <input type='text' name='kp_src[]' placeholder='Key'/>
 </td>
 <td class='w50'>
  <input type='text' name='kp_dest[]' placeholder='Value'/>
 </td>
 <td>
  <!--
   I excluded this part of the code for the sake of cleanliness,
   this would be where the remove button lives its happy life.
  -->
 </td>
</tr>

如何在不使用任何外部库的情况下使用 ↑和↓按钮浏览表单？

例如：使用↓按钮从蓝色输入变为绿色输入，并使用↑按钮从绿色输入变为蓝色输入。

伪代码基本上就是我所需要的。


谢谢。

Answer 1

tymeJV的注释使我考虑了它实际上有多容易，就我而言，我将在输入元素的keyup事件中使用以下伪代码：

define a var named foo
if key is down arrow
  set foo to the next sibling of the current row
else if key is up arrow
  set foo to the previous sibling of the current row
otherwise
  abort

define a var named bar
if current input is the first input in the current row
  set bar to the first input in foo
else if current input is second input in the current row
  set bar to the second input in foo
otherwise
  abort

set focus to bar

我可能已经过早提出了这个问题，但我希望以后对其他人有用。

谢谢。

---

编辑：直到今天，我还没有时间测试（甚至写，大声笑）。 我将在下面发布我的最终代码，以防万一有人觉得有用。

使用Javascript：

 // obj - the source element // event - the event data // i - child index of the textbox function form_vert_nav(obj, event, i) { var o = ((event.keyCode == 38 || event.keyCode == 40) ? obj.parentNode.parentNode : null); if (event.keyCode == 38) { // up o = o.previousSibling; } else if (event.keyCode == 40) { // down o = o.nextSibling; } else { return; } if (o == null) { // keyCode wasn't 38 or 40 and magically slipped through the else, // or the sibling simply doesn't exist (more likely). return; } if ((o = o.getElementsByTagName(obj.tagName)[i]) == null) { // 404 Element Not Found return; } o.focus(); } 

HTML：

 <tbody> <tr> <td><input type='text' onkeydown='form_vert_nav(this, event, 0);'/></td> <td><input type='text' onkeydown='form_vert_nav(this, event, 1);'/></td> </tr> <tr> <td><input type='text' onkeydown='form_vert_nav(this, event, 0);'/></td> <td><input type='text' onkeydown='form_vert_nav(this, event, 1);'/></td> </tr> <tr> <td><input type='text' onkeydown='form_vert_nav(this, event, 0);'/></td> <td><input type='text' onkeydown='form_vert_nav(this, event, 1);'/></td> </tr> </tbody>