寻求键盘聚焦时保持自定义导航栏聚焦的解决方案

Hey there! I’ve run into similar focus issues with navigation bars when keyboards pop up (especially on mobile), so I feel your pain. Here are a few proven solutions to keep your nav bar focused even when the keyboard is active:

You can listen for keyboard-triggered events (like input fields gaining focus) and explicitly refocus the navigation bar if it was previously active. This avoids losing focus unintentionally when the keyboard pops up.

const navBar = document.getElementById('your-nav-bar-id');
const inputFields = document.querySelectorAll('input, textarea');

inputFields.forEach(field => {
  // Listen for when an input gains focus (keyboard will pop up)
  field.addEventListener('focusin', () => {
    // Only refocus if the nav bar was the active element before
    if (document.activeElement === navBar) {
      // Small timeout ensures the keyboard has finished popping up first
      setTimeout(() => navBar.focus(), 100);
    }
  });
});

For mobile specifically, you can also listen for viewport resize events (since keyboards shrink the viewport height) to trigger the refocus:

let originalViewportHeight = window.innerHeight;

window.addEventListener('resize', () => {
  // Check if the viewport shrank (keyboard is active)
  if (window.innerHeight < originalViewportHeight && document.activeElement !== navBar) {
    navBar.focus();
  }
  originalViewportHeight = window.innerHeight;
});

Sometimes the nav bar doesn’t actually lose focus—its focus styling gets overridden when the keyboard appears. Strengthen your focus styles with more specific selectors to ensure they stay visible:

/* Use a specific selector instead of generic ones to avoid style overrides */
.nav-container #your-nav-bar-id:focus {
  outline: 2px solid #007bff;
  background-color: #f8f9fa;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
  /* Add any other focus styles you need */
}

Pro tip: Avoid overusing !important if possible—specific selectors are cleaner and more maintainable.

If your use case allows it, you can temporarily block inputs from gaining focus while the nav bar is active. This ensures the nav stays focused until the user intentionally clicks an input.

let navIsFocused = false;
const navBar = document.getElementById('your-nav-bar-id');
const inputFields = document.querySelectorAll('input, textarea');

navBar.addEventListener('focus', () => {
  navIsFocused = true;
});

navBar.addEventListener('blur', () => {
  // Add a small delay to ignore transient blurs from keyboard popups
  setTimeout(() => {
    navIsFocused = false;
  }, 200);
});

inputFields.forEach(field => {
  field.addEventListener('focus', (e) => {
    if (navIsFocused) {
      e.preventDefault();
      navBar.focus();
    }
  });
});

Note: Use this carefully—it can interfere with user experience if overapplied.

First double-check that your navigation bar element is set up to receive keyboard focus. Add tabindex="0" to make it focusable via tab, and role="navigation" for better accessibility:

<nav id="your-nav-bar-id" tabindex="0" role="navigation">
  <!-- Your navigation links/buttons here -->
</nav>

Hope one of these solutions works for you! Let me know if you need help tweaking any of the code for your specific setup.

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