真要实时转大写必须用 input 事件监听并调用 touppercase()，同时保存恢复光标位置；onkeyup 不可靠，因无法捕获粘贴、ime 上屏等输入方式，且破坏中文输入流程。
不能靠 autocapitalize，也不能靠 text-transform: uppercase —— 前者只影响软键盘提示，后者只改样式不改值。真要实时转大写，必须用 JavaScript 监听 input 事件并手动调用 toUpperCase()，同时维护光标位置。
为什么 onkeyup + toUpperCase() 不可靠
看似简单：onkeyup="this.value = this.value.toUpperCase()"，但实际会出三类问题：
- 中文输入法下，用户正在组词（如输入“zhong”未上屏），
onkeyup就已触发，导致中间态被强行转大写，破坏输入流程 - 粘贴内容（Ctrl+V 或长按粘贴）不会触发
onkeyup，大写逻辑完全失效 - 移动端 IME（如 Gboard、搜狗）的候选词上屏行为不走
keyup，漏处理率极高
必须用 input 事件 + 光标位置修复
input 是唯一能覆盖所有输入方式（键盘、粘贴、拖拽、IME 上屏、语音输入）的事件。但直接赋值 e.target.value = ... 会让光标跳到末尾，必须手动保存并恢复位置：
const input = document.querySelector('input[data-uppercase]');
input.addEventListener('input', (e) => {
const start = e.target.selectionStart;
const end = e.target.selectionEnd;
e.target.value = e.target.value.toUpperCase();
e.target.setSelectionRange(start, end);
});
- 加
data-uppercase属性做精准控制，避免污染全局input - 不要对含 emoji、带重音字符（如
café）或中文混排字段盲目调用toUpperCase()，部分 locale 下行为不一致 - 若字段只允许英文+数字（如车牌号、序列号），可加正则过滤：
e.target.value = e.target.value.replace(/[^A-Z0-9]/g, '').toUpperCase()
autocapitalize="characters" 到底有没有用
它有用，但作用范围极窄：
- 仅在 iOS Safari 和部分 Android WebView 中影响软键盘默认状态（弹出大写键），用户仍可手动切小写
- 对粘贴、拖拽、程序化赋值（
input.value = "abc"）完全无感 - 和
type="number"、inputmode="numeric"冲突，此时属性直接被忽略 - 若你同时用了 JS 实时转换，
autocapitalize就纯属冗余；若不用 JS，则它根本不能保证提交值是大写
别踩 text-transform: uppercase 这个坑
写成 style="text-transform: uppercase" 看起来最省事，但它只是 CSS 渲染层伪装：
-
input.value读出来仍是小写，后端收到的也是小写 - 用户复制框内文字，粘贴出来还是小写
- 表单校验（比如比对身份证号、验证码）会因大小写不一致直接失败
- 屏幕阅读器读出的仍是原始大小写，无障碍体验受损
真正需要大小写确定性的场景（如证件号、订单号、API Key 输入），视觉伪装毫无意义，必须操作真实值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
