必须用 JavaScript 监听 input 事件并调用 toUpperCase()，同时手动维护光标位置；text-transform 和 autocapitalize 仅影响显示或软键盘，不改变实际值。
要让 HTML 表单输入框里的内容「真正变成大写」（不只是看起来像），必须用 JavaScript 处理 input 事件，配合 toUpperCase() 并手动维护光标位置；text-transform: uppercase 只改样式，autocapitalize="characters" 只影响软键盘行为，两者都不改变实际值。
为什么 onblur + toUpperCase() 不够用
很多人在 onblur 里调用 toUpperCase()，看似能“转大写”，但漏掉关键场景：
- 用户粘贴小写字母（如
abc123）时不会触发onblur，值仍为小写 - 移动端长按选中部分文字再编辑，光标会跳到末尾，体验断裂
- 输入中文、emoji 或带变音符号的字符（如
café）时，toUpperCase()在某些 locale 下行为不一致，é → É虽然通常 OK，但不能保证跨环境稳定 - 表单提交前才转换，中间 JS 逻辑（如实时校验、API 请求拼接）拿到的仍是原始大小写
正确做法：监听 input 事件 + 保持光标位置
必须用 input 事件——它覆盖所有输入方式：键盘、粘贴、拖拽、IME、语音输入。同时不能直接赋值后不管光标，否则用户无法连续编辑。
示例代码（加了 data-uppercase 属性做精准控制，避免污染全局）：
立即学习“前端免费学习笔记（深入）”；
const input = document.querySelector('input[data-uppercase]');
input.addEventListener('input', (e) => {
const start = e.target.selectionStart;
const end = e.target.selectionEnd;
// 过滤非 ASCII 字符（可选，防 é/ü 等异常）
const cleanValue = e.target.value.replace(/[^a-zA-Z0-9\s\-_@.]/g, '');
e.target.value = cleanValue.toUpperCase();
e.target.setSelectionRange(start, end);
});
要点说明：
- 只对带
data-uppercase的input生效，不影响其他字段 - 先读取当前光标位置，再赋值，最后恢复——否则光标总跑到末尾
- 正则过滤非目标字符是可选增强，比如车牌号只需字母数字，可提前剔除中文、emoji
- 不用
change事件：它只在失焦或回车时触发，响应太滞后
autocapitalize="characters" 能替代 JS 吗
不能。它只告诉 iOS/Android 软键盘「每个字符都默认弹大写键」，但用户仍可手动切回小写、粘贴小写内容，且桌面浏览器完全忽略该属性。
典型误用：
<input type="text" autocapitalize="characters">
这只会让 iPhone 键盘默认显示大写 A，但用户点一下 ⇧ 就切回小写，粘贴 xyz 还是原样进 value。它不修改 DOM 值，也不拦截输入流。
适用场景仅限于「辅助输入习惯」，比如：autocapitalize="off" 用于验证码/密码框禁用首字母大写，autocapitalize="words" 用于姓名输入——这些和「强制转大写」是两回事。
text-transform: uppercase 是最危险的“伪解决方案”
它让文字看起来全大写，但 input.value、form.submit()、fetch() 发出去的、后端收到的，全是原始小写。常见翻车现场：
- 验证码比对失败（前端显示
ABCD，实际发的是abcd） - 用户复制粘贴字段内容，粘出来的是小写，别人拿去用就出错
- 屏幕阅读器读出 “a b c d”，不是 “A B C D”
- JS 里做
if (value === 'ABC')判断永远 false
它唯一安全的用途是纯展示层：按钮文字、标题、卡片标签——只要不参与任何逻辑判断或数据流转，就可以用。
真正需要「数据级大写」时，JavaScript 处理是绕不开的，而且必须在 input 阶段做，同时小心光标、兼容性和字符边界。别信“一行 CSS 解决”的说法，那只是把问题藏得更深了。
