重置表单后将焦点设置回输入

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>