Установить фокус обратно на ввод после сброса формы

Question

У меня есть форма с полем ввода с автофокусом и кнопкой сброса.При сбросе формы, я хотел бы, чтобы входной набор снова сфокусировался.У кого-нибудь есть решение?

<form>
 <input type="text" name="focus" required class="search-box" autofocus="autofocus" 
placeholder="search items" />
 <a href="javascript:void(0)" class="close-icon" type="reset"></a>
 <button type="submit" class="btn btn-primary filtersearch" 
data-id="<?php echo $_POST['search']; ?>"><span class="glyphicon glyphicon-filter"></span> 
Filter items</button> 
 </form>

Answer 1

A) Используйте сброс button вместо элемента привязки, чтобы сохранить поведение браузера при сбросе формы.

B) Привязать обработчик события reset к форме и сфокусировать поле, котороеимеет атрибут autofocus.Пример: (без jQuery)

var form = document.querySelector('form');
form.addEventListener('reset', function(event) {
    var autofocusField = form.querySelector('[autofocus]');
    if(autofocusField instanceof HTMLInputElement) {
        autofocusField.focus();
    }
});

<form>
    <input type="text" name="focus" required class="search-box" autofocus="autofocus"
           placeholder="search items" />
    <button class="close-icon" type="reset">Reset</button>
    <button type="submit" class="btn btn-primary filtersearch">Filter items</button>
</form>