Android端addEventListener失效问题：PC端正常移动端异常排查

Hey there, I’ve run into similar quirks with older Android browsers before—those legacy versions can be really picky about event handling! Let’s break down why your current code isn’t working and how to fix it.

Why Your Current Code Fails on API 21 #

Your code uses keydown with preventDefault(), but Android 5.0’s Chrome (v42-43) and Samsung Internet have inconsistent behavior with the keydown event for input fields. In some cases, these browsers don’t honor preventDefault() on keydown for certain key types, or the event isn’t intercepted early enough to block the input from being registered. Non-intrusive JS isn’t the issue here—it’s purely about how older mobile browsers handle input events.

Fixes to Try #

Here are a few reliable approaches that should work across older Android browsers:

1. Combine keydown and keypress Events

Older mobile browsers often respond better to keypress for blocking input. Adding both events increases your chances of intercepting the input:

const alphaOnly = (event) => {
  event.preventDefault();
  // Uncomment below if you want to allow navigation/delete keys
  // const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight'];
  // if (!allowedKeys.includes(event.key)) event.preventDefault();
};

['FirstName', 'Surname'].forEach(id => {
  const input = document.getElementById(id);
  input.addEventListener('keydown', alphaOnly, false);
  input.addEventListener('keypress', alphaOnly, false);
});

2. Use the input Event as a Fallback

If the above still doesn’t work, sanitize the input after it’s entered using the input event. This is a foolproof fallback since it runs after the input is added:

const sanitizeInput = (event) => {
  // Replace any non-alpha characters (adjust regex to allow spaces/hyphens if needed)
  event.target.value = event.target.value.replace(/[^A-Za-z]/g, '');
};

['FirstName', 'Surname'].forEach(id => {
  document.getElementById(id).addEventListener('input', sanitizeInput, false);
});

Pro tip: Pair this with the keydown/keypress handlers for immediate feedback, so users don’t see invalid characters briefly.

3. Disable Input via readonly (If Appropriate)

If you need to completely block all input (not just restrict characters), setting the readonly attribute on the inputs might be more reliable than event handlers in older browsers:

['FirstName', 'Surname'].forEach(id => {
  document.getElementById(id).setAttribute('readonly', true);
});

Just note that this will also prevent users from pasting text, which might be exactly what you want.

Final Notes #

Yes, API 21 is definitely the culprit here—its browser engines lack the consistent event handling modern browsers have. Non-intrusive JS (like your current approach) isn’t causing the problem; it’s just that older browsers don’t support the event behavior you’re relying on.

I’d recommend starting with the combined keydown/keypress approach, then adding the input sanitizer as a fallback. That should cover all cases on API 21 and modern browsers alike.

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