自定义模态框激活时如何实现搜索输入框自动聚焦？

我看你现在的代码因为混用了原生JS和jQuery，还有事件绑定逻辑的问题，导致输入框没法自动聚焦。我来帮你修复并实现需求：

问题分析 #

你的代码里有几个关键问题：

• document.querySelectorAll(...) 返回的是原生NodeList对象，不能直接链式调用jQuery的.on()方法，这会导致语法错误
• $('.custom-modal').on('.custom-modal.open', ...) 这个事件写法完全错误，没有这种事件类型，应该在模态框被标记为"open"的时机触发聚焦动作
• 原代码里的事件绑定逻辑混乱，把jQuery和原生JS的写法混在一起了

修复后的实现方案（纯原生JS，匹配你现有代码风格） #

我们可以在控制模态框显示/隐藏的toggleClass方法里，当添加open类的时候，主动找到输入框并设置焦点：

var twentytwenty = twentytwenty || {};
twentytwenty.searchToggles = {
    init: function() {
        this.toggleSearch();
        this.untoggleSearch();
        this.untoggleOnEscapeKeyPress();
    },
    toggleSearch: function() {
        var $this = this;
        // 正确绑定搜索触发按钮的点击事件
        document.querySelectorAll('.toggle.search-toggle.desktop-search-toggle').forEach(function(element) {
            element.addEventListener('click', function(event) {
                event.preventDefault();
                $this.toggleClass('open', 'close');
            });
        });
    },
    untoggleSearch: function() {
        var $this = this;
        // 绑定关闭按钮事件
        document.querySelectorAll('.custom-close').forEach(function(element) {
            element.addEventListener('click', function(event) {
                event.preventDefault();
                $this.toggleClass('close', 'open');
            });
        });
        // 点击模态框空白区域关闭
        document.addEventListener('click', function(event) {
            if (event.target.classList.contains('custom-modal') && event.target.classList.contains('open')) {
                $this.toggleClass('close', 'open');
            }
        });
    },
    // ESC键关闭模态框
    untoggleOnEscapeKeyPress: function() {
        var $this = this;
        document.addEventListener('keyup', function(evt) {
            // 用更语义化的key判断，替代旧的keyCode
            if (evt.key === 'Escape') {
                $this.toggleClass('close', 'open');
            }
        });
    },
    toggleClass: function(add, remove) {
        var modals = document.querySelectorAll('.custom-modal.custom-search-popup');
        modals.forEach(function(modal) {
            modal.classList.add(add);
            modal.classList.remove(remove);
            
            // 当模态框被打开时，自动聚焦输入框
            if (add === 'open') {
                const input = modal.querySelector('input:first-of-type');
                if (input) {
                    // 用setTimeout确保DOM更新完成后再聚焦，避免时序问题
                    setTimeout(() => input.focus(), 0);
                }
            }
        });
    }
};

// DOM就绪执行初始化
function twentytwentyDomReady(fn) {
    if (typeof fn !== 'function') {
        return;
    }
    if ( document.readyState === 'interactive' || document.readyState === 'complete' ) {
        return fn();
    }
    document.addEventListener('DOMContentLoaded', fn, false);
}

twentytwentyDomReady(function() {
    twentytwenty.searchToggles.init();
});

额外优化说明 #

• 把keyCode == 27改成evt.key === 'Escape'，符合现代JS规范，可读性更强
• 修正了模态框空白点击关闭的判断逻辑，用classList.contains()避免类名顺序导致的判断失败
• 添加setTimeout确保模态框的open类已经渲染到DOM后再执行聚焦，避免浏览器渲染时序问题导致的聚焦失败
• 移除了原代码中无效的jQuery事件绑定，保持代码风格统一

对应HTML结构 #

<form method="get" id="search-form-alt" action="'. esc_url(home_url('/')) .'">
    <input type="text" name="s" id="s" placeholder="Type your search words here...">
    <input type="submit" class="fa fa-search" id="searchsubmit" value="" />
</form>

注：可以去掉autofocus属性，因为我们已经通过JS主动控制聚焦，避免页面加载时不必要的焦点跳转

内容的提问来源于stack exchange，提问作者Mohamed Gamal