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

【问题标题】：How to prevent tab key from jumping to the next form field?如何防止tab键跳转到下一个表单域？
【发布时间】：2018-06-13 14:31:57
【问题描述】：

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

问题是当用户开始使用制表符从一个字段跳转到另一个字段时。当他到达当前面板的最后一个字段时，标签会将他带到下一个面板。

所以我需要避免每个表单的最后一个字段接受选项卡事件，或者每个表单的第一个字段可以从选项卡访问。或之类的。

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

我已经尝试了几种方法，但没有运气：

// 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(); 
});

【问题讨论】：

第三个作品：onkeydown。您也可以将tabindex 属性添加到表单元素。
This other question 建议使用tab-index='1' 来防止标签，如果那是你要走的路线。
@Lewis 我认为它不会起作用，因为标签会跳转到下一个可用字段，不是吗？

标签： javascript html forms

【解决方案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(); 
});

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

【讨论】：