Question

I'm trying to add auto focus to a form. I have it working in Chrome but cannot get it working in Firefox with the below code. I think the reason could potentially be that it needs to be just autofocus rather than autofocus="autofocus". Would I be correct in assuming this? If so is there some way I can add it? I'm using a framework called SilverStripe and don't have direct access to editing the input field as it's done dynamically so would need to do it via JavaScript most likely.

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

Note I am initially hiding the input box and displaying on the click of an icon by adding a class:

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

Answer 1

I couldn't find anything in the HTML specification to validate the autofocus behavior exhibited by Chrome. Here's an excerpt from the spec on this behavior.

From 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.

It doesn't mention anything about applying this behavior when the display state changes (as Chrome is apparently doing), only when the element is first inserted into the DOM. This actually appears to a be a bug in Chrome as Firefox is following the HTML spec.

Instead of using the autofocus attribute, you will have to trigger the focus through JavaScript.

Answer 2

You could use JavaScript to automatically focus into any elements with autofocus='yes'

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

This should, theoretically target any elements that have autofocus set to either true, yes, or autofocus and focus on them.

autofocus attribute not working in Firefox on display state change

2 个答案: