Firefox中Shift+Tab无focus事件？如何实现Chrome同款焦点行为

场景复现 #

页面结构（伪代码） #

<div tabindex="0" class="parent">
    <iframe>
        #document
        <input type="text" class="textbox">
    </iframe>
</div>

操作步骤 #

1. 点击文本框使其获得焦点
2. 按下Shift+Tab键

浏览器行为差异 #

• Chrome：焦点直接从textbox跳转至parent元素
• Firefox：焦点先从textbox跳转至iframe，需再次按下Shift+Tab才能跳转至parent元素

当前问题 #

如何在Firefox中实现与Chrome一致的Shift+Tab焦点行为？

已实现Firefox中Tab键与Chrome一致的行为，但Shift+Tab无法同步，原因是Firefox中Shift+Tab时焦点移至iframe不会触发focus事件。

注：PayPal在其支付表单中已解决该问题，但暂未找到具体实现逻辑。

解决方案 #

核心思路是在iframe内部监听Shift+Tab按键事件，当文本框为焦点元素时，主动将焦点转移到父页面的parent元素，并阻止默认焦点跳转行为。

代码实现 #

方案1：跨页面通信实现

• iframe内部脚本：

const textbox = document.querySelector('.textbox');
textbox.addEventListener('keydown', (e) => {
    if (e.shiftKey && e.key === 'Tab') {
        e.preventDefault();
        window.parent.postMessage('focusParent', '*');
    }
});

• 父页面脚本：

window.addEventListener('message', (e) => {
    if (e.data === 'focusParent') {
        const parentElement = document.querySelector('.parent');
        parentElement.focus();
    }
});

方案2：同域直接操作（iframe内容可控时）

const iframe = document.querySelector('iframe');
iframe.addEventListener('load', () => {
    const textbox = iframe.contentDocument.querySelector('.textbox');
    textbox.addEventListener('keydown', (e) => {
        if (e.shiftKey && e.key === 'Tab') {
            e.preventDefault();
            document.querySelector('.parent').focus();
        }
    });
});

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