javascript - 如何防止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 将起作用。所以基本上，在每个面板/选项卡的最后一个字段上，我将分配一个类，例如“block-tab”。

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

然后:

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

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