如何防止tab键跳到下一个表单域？

Question

我遇到了一个问题：我正在构建一个页内多级表单。每个“阶段”都位于其自己的面板（div）上。我将通过 javascript（下一个/上一个按钮）浏览面板。每个面板都有自己的验证，如果当前面板未成功验证，则无法跳转到下一个面板。一切都很好。

问题是当用户开始使用选项卡从一个字段跳转到另一个字段时。当他到达当前面板的最后一个字段时，该选项卡会将他带到下一个面板。

因此，我需要的是避免每个表单的最后一个字段接受选项卡事件，或者避免从选项卡访问每个表单的第一个字段。或者类似的。

换句话说：如何仅对某些字段禁用 Tab 键？或者，如何将选项卡操作限制为表单中的一组特定字段？

我尝试了几种方法，但没有成功：

// on last panel field
$('.block-tab').on('keypress', function(e) { 
  if (e.keyCode == 9) e.preventDefault();
});

// on first panel field
$('.block-tab').on('keyup', function(e) { 
  if (e.keyCode == 9) e.preventDefault(); 
});

Answer 1

正如@Teemu 所建议的，onkeydown将会起作用。所以基本上，在每个面板/选项卡的最后一个字段上，我将分配一个类，例如“块选项卡”。

<input class="block-tab" name="email" id="email" type="text"  value="" />

然后：

$('.block-tab').on('keydown', function(e) { 
  if (e.keyCode == 9) e.preventDefault(); 
});

这将阻止用户在不单击“下一步”按钮的情况下访问下一个面板，从而首先验证当前面板。