javascript - autofocus 属性在 Firefox 中显示状态更改时不起作用

Question

我正在尝试向表单添加自动对焦。我让它在 Chrome 中工作，但无法使用以下代码在 Firefox 中工作。我认为原因可能是它只需要 autofocus 而不是 autofocus="autofocus"。我的假设是否正确？如果是这样，我可以通过某种方式添加它吗？我正在使用一个名为 SilverStripe 的框架，并且无法直接访问编辑输入字段，因为它是动态完成的，因此很可能需要通过 JavaScript 来完成。

<input type="text" name="Search" class="form-control search-form" id="TemplateSearchForm_SearchForm_Search" placeholder="Search..." autofocus="autofocus">

请注意，我最初隐藏输入框并通过添加类在单击图标时显示:

jQuery('.search').click(function () {
    if(jQuery('.search-btn').hasClass('fa-search')){
        jQuery('.search-open').fadeIn(500);
    } else {
        jQuery('.search-open').fadeOut(500);
    }
});

Answer 1

我在 HTML 规范中找不到任何内容来验证 Chrome 展示的 autofocus 行为。以下是有关此行为的规范的摘录。

来自 4.10.19.7 Autofocusing a form control: the autofocus attribute :

When an element with the autofocus attribute specified is inserted into a document, user agents should run the following steps:

[...]

Note: This handles the automatic focusing during document load.

它没有提及在显示状态发生变化时应用此行为(正如 Chrome 显然所做的那样)，仅在元素首次插入到 DOM 中时应用。这实际上似乎是 Chrome 中的一个错误，因为 Firefox 遵循 HTML 规范。

您必须通过 JavaScript 触发焦点，而不是使用 autofocus 属性。