输入框失焦时Escape按键无法关闭搜索窗口问题咨询

云上老周

2026-10-3

问题根因

你将keydown事件监听绑定在了.searchDOM节点上，键盘事件仅当触发源是绑定节点本身或其内部后代元素时，才会触发对应的回调逻辑。当搜索输入框失焦后，焦点落到了.search节点外的其他元素上，此时按下Esc键的keydown事件不会被.search上的监听器捕获，因此关闭逻辑不会执行。

修复方案

推荐使用全局事件监听的方案，兼容性最好，无论焦点在页面哪个位置都能正常触发关闭：

把原代码中绑定在search上的keydown监听，改为绑定在document对象上即可，修改后的完整代码如下：

const btn = document.querySelector('.header-left__search-btn'),
        body = document.body,
        search = document.querySelector('.search'),
        searchInput = document.querySelector('#search__input'),
        btnClose = document.querySelector('.search__closed-icon');

    function searchOpen() {
        btn.addEventListener('click', () => {
            body.classList.add('is-search-open');
            setTimeout(() => {
                searchInput.focus(); 
            }, 300);
            if (body.classList.contains('is-head-open')) {
                body.classList.remove('is-head-open');
            }  
        });

        // 把原search.addEventListener改为document.addEventListener
        document.addEventListener('keydown', (e)  => {          
            if(e.code === "Escape" && body.classList.contains('is-search-open')) {
                body.classList.remove('is-search-open');
                // 可选：关闭后主动清除焦点，避免残留
                searchInput.blur();
            }
        });

        btnClose.addEventListener('click', function ()  {
            body.classList.remove('is-search-open');
        });
    }
    searchOpen();