最常用方法是text-transform: uppercase仅视觉大写，输入值仍为小写；真正转换需用input事件监听并调用touppercase()同步修改value和光标位置；pattern校验可作提交前补充，三者常组合使用。
input输入框用text-transform: uppercase只是视觉大写
这招最常用，但本质是CSS样式欺骗——用户输入的值仍是小写，提交后后端收到的还是原始大小写。适合纯展示场景，比如表单预览、UI一致性要求高但不校验数据的地方。
常见错误现象：console.log(input.value) 打印出来还是小写；用form.submit()提交后，后端收到username字段为john而非JOHN。
- 仅适用于不需要后端校验原始输入的场景
- 移动端软键盘可能仍显示小写字母（iOS尤其明显），容易误导用户
- 无法阻止用户粘贴小写内容，粘贴后样式自动生效，但
value不变
用input事件实时转toUpperCase()
真正改变输入值本身，确保input.value始终为大写。适合需要后端按大写逻辑处理的业务，比如会员编号、许可证码等强格式字段。
关键点：必须监听input事件（不是change），并在事件中同步修改value并重置光标位置，否则会导致光标跳到末尾或输入错乱。
- 示例代码：
<input type="text" id="codeInput"><script>
const el = document.getElementById('codeInput');
el.addEventListener('input', () => {
const pos = el.selectionStart;
el.value = el.value.toUpperCase();
el.setSelectionRange(pos, pos);
});
</script>
- 必须保留光标位置，否则连续输入会“卡住”或跳位
- 对中文、数字、符号无影响，只对英文字母生效
- 避免在
keyup里做，因为用户长按按键或输入法上屏时可能漏触发
用pattern和oninvalid强制校验但不自动转换
如果业务要求“必须大写”，但不想干预用户输入过程（比如让用户自己意识到要输大写），可用HTML5原生验证配合提示。
注意：pattern="[A-Z0-9]*"只校验字母数字且全大写，不包含空格或特殊字符；若允许空格或连字符，需扩展正则，例如pattern="[A-Z0-9\s\-]*"。
- 示例：
<input type="text" pattern="[A-Z0-9]*" title="请输入大写字母或数字" required>
- 用户提交时才校验，不实时干预，体验更宽松
- 移动端支持度好，但部分Android浏览器对
title提示不友好 - 不能替代JS转换，只是补充校验层
React/Vue中处理大写转换要注意受控组件更新时机
在React里直接改value状态再setState没问题，但别忘了同步更新光标；Vue 3的v-model绑定需用.sync或computed setter方式拦截赋值。
容易踩的坑：onChange里调用setState({ value: e.target.value.toUpperCase() })后，若没手动保存光标位置，快速输入时会出现字符“吞掉”或光标回跳。
- React推荐写法：用
useRef存光标位置，在useEffect里恢复（或用input事件内同步setSelectionRange） - Vue 3建议封装成自定义指令，如
v-uppercase，内部统一处理事件和光标 - 不要在
render或setup里直接调用toUpperCase()，那只是读取时转换，不改变源数据
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
