text-transform: uppercase不能真正强制转大写，仅改变视觉渲染效果，不修改dom原始文本内容；对英文字符生效，但中文、数字、标点无效，复制、js获取及表单提交仍为原始大小写。
text-transform: uppercase 能不能真正“强制”转大写
不能。它只改变渲染效果，不修改原始文本内容——这是最常被忽略的前提。你看到的是大写，document.querySelector('p').textContent取出来还是小写，复制粘贴出来也是小写，表单提交时input.value也不会变。所谓“强制”，仅限于视觉层。
哪些场景下加 text-transform: uppercase 才生效
对支持文本渲染的元素有效，但有明确限制：
-
p、div、span、h1–h6、button、label等常规文本容器，直接加就起作用 -
input和textarea虽然能渲染出大写效果，但用户输入值仍是原始大小写，后端收到的也一样，极易导致校验失败或比对错误 -
select的option在旧版 Safari（≤15.6）中不支持该属性，别指望它统一展示 -
svg中的<text></text>标签完全无视text-transform，必须用 JS 或服务端预处理
中英文混排时 text-transform: uppercase 的实际表现
它只作用于有大小写概念的字符（主要是 ASCII 字母 A–Z，以及部分带重音的拉丁字母如 é、ñ），对以下内容完全无效：
- 中文、日文、韩文等非拉丁文字：「张三」、「こんにちは」原样显示
- 阿拉伯数字和标点：「API-2024」 → 「API-2024」（
API变大写，-2024不动） - 带声调的拼音：「zhāng sān」 → 「ZHĀNG SĀN」（声调符号保留，不是「ZHANG SAN」）
- 某些字体中英文字形 baseline 偏低，全大写后可能视觉下沉，需配合
letter-spacing或微调font-size
需要真大写时，必须用 JavaScript 补位
如果业务逻辑依赖大写值（比如 API 请求头、用户名校验、复制即用），光靠 CSS 不够：
- 对静态文本：可提前用 JS 处理
el.textContent = el.textContent.toUpperCase() - 对
input：监听input事件并同步更新value，同时设style.textTransform = 'none'避免双重转换 - 对表单提交：在
submit事件里统一调用input.value = input.value.toUpperCase() - 注意：不要对中文或含数字字段盲目调用
toUpperCase()，它对非拉丁字符无影响，但可能干扰后续正则或比对逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
