使用键盘时阻止输入框聚焦触发页面滚动的解决方案

核心问题分析 #

浏览器的聚焦自动滚动行为是在focus事件触发后执行的，仅通过e.preventDefault()无法阻止该行为；而tabindex="-1"会移除元素的键盘可聚焦性，直接破坏可访问性。

方案1：使用focus({ preventScroll: true })阻止聚焦滚动 #

现代浏览器支持focus()方法的preventScroll参数，可直接阻止聚焦时的自动滚动。修改你的代码如下：

(($) => {
    $(document).on('focus', 'input', (e) => {
        e.stopImmediatePropagation();
        e.target.focus({ preventScroll: true });
    });
})(jQuery);

注意：该方案需要浏览器支持Element.focus({ preventScroll: true })，主流现代浏览器（Chrome 64+、Firefox 55+、Edge 79+）均已支持。

方案2：隐藏input到可视区域外（兼顾兼容性与可访问性） #

将控制手风琴的input定位到可视区域外，既保留其键盘可聚焦性，又避免浏览器因聚焦可视元素触发滚动。同时通过关联的<label>元素提供视觉交互入口：

1. CSS修改：

.accordion__input {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

2. 确保HTML结构中label与input关联：

<input type="radio" name="accordion" id="panel1" class="accordion__input">
<label for="panel1" class="accordion__trigger">面板1标题</label>
<div class="accordion__panel">面板1内容</div>

这种方式完全符合WCAG可访问性标准：用户可点击label切换面板，键盘导航时聚焦input（但不可见，不会触发滚动），所有键盘操作逻辑保持正常。

方案3：切换面板时主动滚动到顶部（备选） #

如果上述方案无法满足需求，可在切换面板时主动将页面滚动到触发元素顶部，替代浏览器的自动滚动：

(($) => {
    $(document).on('change', 'input[name="accordion"]', (e) => {
        const $trigger = $(`label[for="${e.target.id}"]`);
        // 滚动到触发元素顶部，可选平滑效果匹配CSS过渡
        $trigger[0].scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        });
    });
})(jQuery);

该方案通过主动控制滚动行为，避免浏览器在过渡期间的突兀跳转，同时保持可访问性。

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