自动对焦属性在 Firefox 中因显示状态更改而不起作用

autofocus attribute not working in Firefox on display state change

本文关键字：状态 显示 不起作用 属性 Firefox      更新时间：2023-09-26

我正在尝试向表单添加自动焦点。我让它在 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);
    }
});

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

从 4.10.19.7 自动对焦窗体控件：自动对焦属性：

将指定了自动对焦属性的元素插入到文档中时，用户代理应运行以下步骤：

[...]

注意：这将处理文档加载期间的自动对焦。

它没有提到在显示状态更改时应用此行为的任何内容（就像 Chrome 显然所做的那样），仅在元素首次插入 DOM 时。这实际上似乎是Chrome中的一个错误，因为Firefox遵循HTML规范。

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

你可以使用 JavaScript 自动关注任何元素，autofocus='yes' 

$('[autofocus="yes"], [autofocus="autofocus"], [autofocus="true"]').focus();

理论上，这应该针对任何autofocus设置为true、yes或autofocus的元素，并专注于它们。

相关文章：