Question

＆＃13;

$(function () {
    $('#save').click(function() {
        $('#save').attr('disabled', 'disabled');
        console.log($(document.activeElement).attr('id'));
    });
    $('#test').focus();
    console.log($(document.activeElement).attr('id'));
});

＆＃13;

button:focus {
  outline: 1px dotted #000000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<body id="body">
  <button id="discard" disabled="disabled">Discard</button>
  <button id="save">Save</button>
</body>

＆＃13;

我有一个Discard Changes按钮，点击后，用户会看到一个确认对话框，其中显示＆＃34;您确定要放弃更改吗？＆＃34;。当他们点击OK时，我们会关闭对话框，并希望将焦点重新放在Discard Changes按钮上，但我们现在已将其禁用，因为丢弃没有任何更改。当我检查document.activeElement值时，它不是禁用按钮，它是正文元素。但是，当用户点击Save按钮时，由于他们将注意力集中在元素上，因此即使在禁用后，它也会获得焦点，因此它具有焦点。由于某些原因我在片段中没有看到我的焦点样式设置在禁用的保存按钮上，即使在我的应用程序中我确实看到了它。

是否可以使用jQuery设置对禁用按钮的关注？如果没有，为什么不呢？如果是这样，我做错了什么？

Answer 1

很抱歉加入派对迟到了，但您可以使用aria-disabled属性而不是disabled，并且您的元素将能够被分配到焦点（即使在IE和移动设备中，通常这个问题也没有'在Chrome或Edge中升起。）

作为旁注，如果您还希望使用键盘TAB导航元素，当然请务必设置tabindex="0"（但是，不需要通过JavaScript以编程方式分配焦点）。

Answer 2

不，该按钮无法获得焦点，因为它已被禁用。根据{{3}}（HTML5版本）禁用的表单控件必须阻止点击事件和其他交互。

您需要做的是在某个时刻启用控件并以此方式指定焦点。另一个建议是启用按钮并实施某种形式的检测，以确定是否响应丢弃按钮的click事件。

另外，（我在这里猜测）保存按钮可能显示为活动状态，因为它在禁用之前处于活动状态。虽然浏览器需要阻止通过交互访问禁用的项目，但删除焦点（或在这种情况下为document.activeElement）可能不是规范的实现要求。

Answer 3

aria-disabled 将允许 focus() 禁用元素

以编程方式将焦点设置为禁用按钮不起作用

3 个答案: