JS移动端keypress事件失效 换keyup/keydown全端不生效如何解决

• keypress事件已被现行Web标准废弃，移动端绝大多数软键盘（包括系统自带输入法、第三方输入法）不会触发该事件，这是桌面端运行正常、移动端事件不生效的核心原因。
• 替换为keydown/keyup后失效有两个核心原因：一是移动端输入法处于候选词组字状态时，这两个事件会固定返回keyCode=229，原有代码判断97<=keyCode<=122的小写字母逻辑完全不会命中；二是keyup触发时用户输入的字符已经写入输入框，原有手动拼接字符+阻止默认行为的逻辑会造成输入重复、光标错位。
• 原有逻辑仅覆盖了物理键盘单字符敲击的场景，完全不支持粘贴、输入法候选词上屏、软键盘联想输入等移动端高频操作。

不要依赖键盘事件做输入内容转换，改用全平台兼容的input事件处理，同时兼容输入法组字状态、保留光标位置，避免打断用户正常输入：

function attribUppercase(e) {
  // 输入法正在组字（拼音/手写候选阶段）时不处理，避免打断正常输入
  if (e.isComposing) return;
  const inputEl = e.target;
  const selectStart = inputEl.selectionStart;
  const selectEnd = inputEl.selectionEnd;
  const originValue = inputEl.value;
  const upperValue = originValue.toUpperCase();
  // 内容无变化时不更新，避免不必要的光标重定位
  if (originValue === upperValue) return;
  inputEl.value = upperValue;
  // 还原光标位置，适配选中替换文本的场景
  const posOffset = upperValue.length - originValue.length;
  inputEl.setSelectionRange(selectStart + posOffset, selectEnd + posOffset);
}

window.onload = function() {
  const inputEl = document.getElementById("attrib-108-0");
  if (inputEl) {
    // 用input事件替代键盘事件，覆盖键盘输入、粘贴、语音输入等所有输入场景
    inputEl.addEventListener("input", attribUppercase, false);
    // 监听输入法组字完成事件，处理候选词上屏后的转换
    inputEl.addEventListener("compositionend", attribUppercase, false);
  }
}

可选轻量实现 #

如果仅需要输入过程中视觉上展示大写，不需要实时修改输入框的值，可以直接用CSS实现，性能远高于JS事件监听，无任何兼容性问题：

#attrib-108-0 {
  text-transform: uppercase;
}

后续提交表单时，统一对输入框的value执行toUpperCase()转换即可。

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