使用KeyPress“Tab”进行事件控制

Question

所以我有几个输入表单被禁用，直到它们按顺序填写，因为根据它们的选择调用服务器。我有一个自定义下拉列表，允许我做一个预先输入并单击我想要的项目。当我单击该项目时，该字段将解锁为我的数据模型发生的onblur和onchange事件的组合。对我来说，问题是我希望用户能够选项卡。但是当我点击tab时，onblur和onchange没有禁用该字段，因此它会跳过几个不应该删除的字段。是否有任何关于防止Tab键按下跳过禁用元素的建议？我可以选择并关注已禁用的元素吗？

Answer 1

这是不可能的，正如文档所说：

  

如果设置了disabled属性，或者如果它是设置了disabled属性且不是该fieldset元素的第一个图例元素子元素（如果有）的后代的fieldset元素的后代，则禁用表单控件。

     

禁用的表单控件必须防止在元素上调度在用户交互任务源上排队的任何点击事件。

因此，您无法单击这些元素，也无法关注无法单击的元素。

https://www.w3.org/TR/html5/forms.html#concept-fe-disabled

因此，如果您需要允许关注这些元素，唯一的选择就是不要使用disabled属性。您可以使用.disabled类来绑定关键事件以禁止编辑值。

Answer 2

假设您愿意暂时启用已禁用的元素（从而使其可写），可以通过检查 next element 是否具有 disabled attribute来完成此操作 hasAttribute() 。如果是，您可以在false返回keydown 之前将此属性更改为true ，因此keyup将标签为已禁用的元素

此外，您可以设置新属性wasDisabled，然后可以使用$(this)[0]进行检查。如果元素具有此类，则可以在再次选中该元素后重新禁用元素。

这可以在以下jQuery示例中看到：

＆＃13;

＆＃13;

$('input').on('keydown', function(e) {
  if (e.keyCode == 9) {
    if ($(this).next()[0].hasAttribute('disabled')) {
      $(this).next().attr('disabled', false);
      $(this).next().attr('wasdisabled', true);
    }
    if ($(this)[0].hasAttribute('wasdisabled')) {
      $(this).attr('disabled', true);
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input>
<input disabled>
<input>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！ ：）

Answer 3

我最终将其切换为只读属性。 readonly允许我标记它并专注于它而不能在模糊和更改完成之前输入它。