必须用 javascript 实时监听 input 事件并修改 value 属性，因为 text-transform: uppercase 仅改变显示样式，input.value 仍为原始大小写，导致后端校验失败、可访问性受损及粘贴内容未转换等问题。
不能只靠 CSS，必须用 JavaScript 实时监听 input 事件并修改 value 属性，否则后端收不到大写数据。
为什么 text-transform: uppercase 不行
CSS 的 text-transform: uppercase 只改显示样式，input.value 仍是原始大小写。常见后果包括：
-
form.serialize()或FormData.get('field')拿到的是小写字符串 - 后端做验证码、车牌号、SKU 校验时直接失败
- 用户复制粘贴
abc123进来，页面看着是大写，实际值没变 - 屏幕阅读器读出的仍是小写字母，可访问性受损
用 input 事件实时转大写（推荐）
监听 input 事件覆盖所有输入路径：键盘、粘贴、拖拽、IME、语音输入。关键点是同步更新 value 并保持光标位置（可选）：
<input type="text" data-uppercase id="sku"><script>
const el = document.querySelector('input[data-uppercase]');
el.addEventListener('input', (e) => {
const start = e.target.selectionStart;
const end = e.target.selectionEnd;
const upper = e.target.value.toUpperCase();
if (e.target.value !== upper) {
e.target.value = upper;
e.target.setSelectionRange(start, end);
}
});
</script>
- 必须用
input，不用change或blur——它们不响应实时输入 - 加
data-uppercase属性做精准控制，避免污染全局input - 中文、emoji、带重音字符（如
café）在多数 locale 下能正确转为CAFÉ，但不保证全平台一致；若字段只含英文数字（如车牌、序列号），可放心用
移动端 autocapitalize="characters" 是辅助，不是替代
autocapitalize 是告诉软键盘“怎么弹字母”，不影响 DOM 值，也不能处理粘贴：
-
autocapitalize="characters"在 iOS 键盘上会默认弹大写字母，但用户仍可手动切回小写 - 粘贴进来的
sku-123不会自动变SKU-123，仍需 JS 处理 - 该属性在
type="number"或inputmode="numeric"下完全失效——数字键盘无大小写 - 某些 UI 框架（如 Vant、Ant Design Mobile）需显式透传：
:input-props="{ autocapitalize: 'characters' }"
Layui 等框架提交前兜底处理
前端监听可能被快速粘贴+提交绕过（尤其旧版 Safari），建议在提交时二次清洗：
form.on('submit(yourFilter)', function(data){
data.field.sku = (data.field.sku || '').toUpperCase();
return true;
});
- 修改
data.field会影响最终提交内容，但不会反向更新 DOM 中的input.value - 所以仍需前端实时监听，否则用户看到的和提交的不一致
- 注意：Layui 的
lay-verify="alphanum"不校验大小写，业务若要求“必须全大写”，得自己加规则或后端强校验
真正容易被忽略的是粘贴行为在 iOS Safari 上的延迟触发问题——oninput 可能漏一次，所以实时监听 + 提交兜底是生产环境最稳的组合。别省那几行代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
