页面加载时无输入框焦点，打字自动聚焦并追加字符功能异常求助

Hey there! Let's dig into why your code isn't capturing the first typed character and fix it up properly.

The Core Issues #

1. Timing of the keyup event: When you press a key, the browser handles its default behavior first (since the input isn't focused yet, that character doesn't get sent anywhere). By the time keyup fires, you focus the input and append the key—but some browsers won't render that first character correctly because the focus just landed.
2. Overly tangled keyCode logic: Your condition for filtering allowed characters is messy, which might accidentally block valid characters without you noticing.
3. No check for existing focus: If the input already has focus, your code still runs, which can cause weird behavior during normal typing.

Fixed Solution #

Here's a cleaned-up, reliable version that addresses all these problems:

document.addEventListener('keydown', function(event) {
  const inputElement = document.getElementById("input");
  
  // Skip logic if input is already focused (let normal typing work)
  if (document.activeElement === inputElement) return;
  
  // Filter out non-printable/control keys (adjust this list as needed)
  const excludedKeys = ['Enter', 'Tab', 'Shift', 'Control', 'Alt', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Escape', 'Backspace', 'Delete'];
  if (excludedKeys.includes(event.key)) return;
  
  // Stop the browser from handling this key press elsewhere
  event.preventDefault();
  
  // Focus the input and add the typed character
  inputElement.focus();
  inputElement.value += event.key;
});

<input type="text" id="input">
<!-- You don't need jQuery for this functionality, so you can remove that script tag if it's not used elsewhere -->

What Changed? #

• Switched to keydown: This lets us intercept the key press before the browser processes it, so we can capture the first character without missing it.
• Simplified key filtering: Instead of confusing keyCode checks, we use a clear list of excluded keys—you can add or remove entries here based on which keys you want to block.
• Added focus check: When the input is already focused, we skip our custom logic, so normal typing works as expected.
• Removed unused jQuery: Your code doesn't rely on jQuery, so we can drop that dependency entirely.

Give this a test—now when you start typing with the input unfocused, the first character will show up immediately, and continuous typing will work smoothly!

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