禁用 bootstrap 按钮可以通过 Tab 键访问

Question

因此，通过执行以下操作，按钮应该被禁用，但您实际上可以使用 Tab 键访问按钮：

<button type="submit" class="btn btn-primary disabled">Submit</button>

因此，为了防止这种情况发生，我是否必须将 tabindex="-1" 添加到我想要禁用的所有元素中？我以为通过使用禁用 class 这将得到处理，但似乎没有。

还有其他方法吗？

Answer 1

是的，这很烦人但也很合乎逻辑。 Tab键和焦点是不同的browser-task； CSS（除了少数例外）主要是关于视觉行为。添加 tabindex="-1" 会变得很糟糕，因为一旦按钮不再被禁用，您很可能还希望通过 Tab 键使按钮聚焦。

如果按钮正在接收焦点并且它是 disabled :

，我会建议将焦点移动到上一个或下一个元素的处理程序

$('button').focus(function(e) {
  if ($(this).hasClass('disabled')) {
    e.currentTarget.nextElementSibling.focus()
    //or e.currentTarget.previousElementSibling.focus()
  }
})

禁用 bootstrap 按钮可以通过 Tab 键访问

disabled bootstrap button can be accessed from tabbing

twitter-bootstrap

disabled-control