我想创建一个可导航的文本输入网格并选择控件。 “可导航”是指用户应该能够使用4个箭头键选择该方向上的下一个控件。
这意味着应该抑制箭头键的正常行为（正常情况下，向左和向右箭头会在输入控件中移动光标，并向上/向下选择select中的下一个选项。
仅当用户按下“ e”（编辑）时，控件才应该可编辑
我试图通过在容器div上有一个事件处理程序来移动焦点来做到这一点，但是每当我使用箭头键（在编辑模式下）时，容器div的事件处理程序也会侦听并更改焦点
在编辑模式下停止传播或阻止Default时，我应该添加一个eventListener吗？
示例HTML：
<html>
<body>
<table>
<tr>
<td><input type="text" value="ABC"></td>
<td>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</td>
<td><input type="text" value="ABC"></td>
<td>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</td>
<td><input type="text" value="ABC"></td>
<td>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" value="ABC"></td>
<td>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</td>
<td><input type="text" value="ABC"></td>
<td>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</td>
<td><input type="text" value="ABC"></td>
<td>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" value="ABC"></td>
<td>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</td>
<td><input type="text" value="ABC"></td>
<td>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</td>
<td><input type="text" value="ABC"></td>
<td>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" value="ABC"></td>
<td>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</td>
<td><input type="text" value="ABC"></td>
<td>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</td>
<td><input type="text" value="ABC"></td>
<td>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</td>
</tr>
</table>
</body>
</html