如何在广告刷新时保持JS打字游戏的键盘输入焦点？

Great question—this is such a frustrating issue for interactive web games when ads hijack focus mid-session. I’ve tackled similar problems with embedded ads and games before, so here are several practical, actionable solutions to keep your typing game locked into keyboard input:

1. Auto-Refocus the Game Element After Ads Load #

The most direct fix is to detect when an ad finishes refreshing, then immediately yank focus back to your game’s main container.

• If you control the ad loading logic: Hook into the ad’s load event (for iframes) or your ad SDK’s completion callback. Once the ad finishes rendering, call focus() on your game element:

  const adIframe = document.getElementById('ad-iframe');
  const gameContainer = document.getElementById('typing-game');
  
  adIframe.addEventListener('load', () => {
    // Ensure the game container can receive focus first (see tip below)
    gameContainer.focus();
  });
  

• For third-party ads with no direct callbacks: Use a MutationObserver to watch for changes to the ad container. When the ad DOM updates (signaling a refresh), trigger the focus after a tiny delay to let the ad finish loading:

  const adContainer = document.getElementById('ad-container');
  const gameContainer = document.getElementById('typing-game');
  
  const observer = new MutationObserver(() => {
    setTimeout(() => gameContainer.focus(), 100);
  });
  
  observer.observe(adContainer, { childList: true, subtree: true });
  

2. Make Your Game Element Focusable First #

Before you can refocus the game, ensure its main container (like a <div>, <canvas>, or custom element) can actually receive focus. Add the tabindex attribute to it:

<!-- For a div-based game -->
<div id="typing-game" tabindex="0">...</div>

<!-- For a canvas game -->
<canvas id="game-canvas" tabindex="0"></canvas>

• Use tabindex="0" to make it focusable via keyboard navigation, or tabindex="-1" if you only want it to be focusable programmatically.
• Don’t forget to call gameContainer.focus() when the game first loads (after a user interaction, like a click, to bypass browser security restrictions that block auto-focus without user input).

3. Redirect Global Keyboard Events to the Game #

If ads aggressively steal focus and refocusing isn’t reliable, you can intercept global keyboard events and forward them to your game. This way, even if focus is elsewhere, typing input still reaches the game:

const gameContainer = document.getElementById('typing-game');

document.addEventListener('keydown', (e) => {
  // Skip if the user is typing in an input/textarea (don't hijack real text input)
  if (['INPUT', 'TEXTAREA'].includes(e.target.tagName)) return;

  // Forward the event to the game with all original properties
  gameContainer.dispatchEvent(new KeyboardEvent('keydown', {
    key: e.key,
    code: e.code,
    bubbles: true,
    cancelable: true
  }));
});

Note: Repeat this logic for keyup events if your game relies on them.

4. Pause/Resume the Game with User Feedback #

For a smoother user experience, pause the game when an ad starts loading, then resume it and refocus once the ad is done. Add a small prompt to let users know they can continue:

function pauseGame() {
  game.isPaused = true;
  document.getElementById('game-status').textContent = 'Ad loading...';
}

function resumeGame() {
  game.isPaused = false;
  document.getElementById('game-status').textContent = '';
  const gameContainer = document.getElementById('typing-game');
  gameContainer.focus();
}

// Hook these functions to your ad's start/end events
adSDK.onAdStart(pauseGame);
adSDK.onAdComplete(resumeGame);

Quick Tips to Avoid Pitfalls #

• Browser security restrictions: Most modern browsers block focus() calls that aren’t triggered by a user interaction (like a click). So set your initial game focus after the user first clicks the game area.
• Test across browsers: Ad networks might use different injection methods, so validate your fix in Chrome, Firefox, and Safari.

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