text-transform:uppercase仅改变显示效果，input.value仍为原始大小写；需配合JS（如input事件+toUpperCase()）确保值本身大写，尤其注意粘贴、IME输入等场景的兼容处理。
用 text-transform: uppercase 实现视觉大写
这方法最常用，但要注意：它只改变显示效果，input.value 仍是原始大小写。用户粘贴小写字母、用 IME 输入中文后切换英文，都可能绕过这个样式。
适用场景：表单展示要求统一（如证件号、SKU 编码），且后端/JS 会做二次校验或转换。
- 在 CSS 中加：
input.uppercase { text-transform: uppercase; } - HTML 中写：
<input type="text" class="uppercase"> - 注意不要和
font-variant: small-caps混用，后者语义不同，且对数字无效
用 input 事件 + toUpperCase() 强制转值
如果必须保证 input.value 始终为大写（比如要直接提交、做前端校验、绑定到 Vue/React 响应式数据），就得用 JS 拦截输入并重写值。
关键点：不能只监听 change，那太晚；得用 input 事件，并小心处理光标位置和粘贴行为。
立即学习“前端免费学习笔记（深入）”；
- 基础写法：
el.addEventListener('input', () => { el.value = el.value.toUpperCase(); }); - 粘贴时需加
setTimeout延迟执行，否则value还没更新：el.addEventListener('paste', () => setTimeout(() => el.value = el.value.toUpperCase(), 0)); - 移动端软键盘可能触发多次
input，但toUpperCase()是幂等的，影响不大
用 oninput 内联写法快速验证
临时调试或简单页面里，直接写内联 handler 最快，不用额外绑事件。
但注意：内联写法不利于复用和维护，生产环境建议抽离到 JS 文件中。
- 示例：
<input type="text" oninput="this.value=this.value.toUpperCase()"> - 别写成
onchange——用户还没失焦就无法响应 - 如果 input 有初始值，记得初始化时也调用一次
toUpperCase()，否则加载后还是原样
遇到 contenteditable 或富文本场景怎么办
contenteditable 元素不支持 text-transform 对输入流生效，也不能直接改 innerText 而不破坏格式。此时必须监听 input 事件 + 手动操作 DOM。
更麻烦的是：用户可能选中部分文字、按 Shift+Ctrl+U 切换大小写（某些浏览器支持），这些都无法被 CSS 控制。
- 推荐方案：监听
input后用getSelection()和document.execCommand('insertText')替换，但兼容性差 - 务实做法：只对纯文本
<div contenteditable="true">做textContent.toUpperCase()赋值，并清空选区防止闪烁 - 真正复杂的富文本编辑器（如 Slate、Quill）应交由其插件系统处理，别硬套 CSS 或原生事件
input 都不够稳，得组合处理。 
