推荐首选 CSS 的 text-transform: uppercase 实现视觉大写，轻量且不影响表单逻辑；若需 input.value 本身为大写，则用 input 事件实时调用 toUpperCase() 转换，并兼顾扫码、粘贴等场景。
在优惠券兑换表单中，让用户输入的券码自动转为大写，能避免因大小写不一致导致校验失败。最简单可靠的方式是用 CSS 的 text-transform: uppercase 配合 JavaScript 输入时强制规范值。
用 CSS 实现视觉大写（推荐首选）
仅改变显示效果，不修改实际值，适合后端自行处理大小写兼容的情况：
- 在输入框的 CSS 中添加：
text-transform: uppercase; - 这样用户看到的实时输入始终是大写，但
input.value仍是原始值（需注意） - 优点：轻量、无性能开销、不影响表单提交逻辑
用 JavaScript 实时转换输入值（确保数据统一）
如果后端严格要求传大写字符串，或需保证 input.value 本身是大写，应在输入过程中同步转换：
- 监听
input事件（比keyup更全面，覆盖粘贴、剪切、自动填充等） - 获取当前值并转大写：
input.value = input.value.toUpperCase(); - 注意：要防止光标跳到末尾，可选保存/恢复光标位置（多数场景可忽略）
完整示例代码
结合 CSS 视觉 + JS 值转换，兼顾体验与数据可靠性：
立即学习“前端免费学习笔记（深入）”；
<input type="text" id="couponCode" placeholder="请输入优惠券码" style="text-transform: uppercase;"><script>
const input = document.getElementById('couponCode');
input.addEventListener('input', () => {
input.value = input.value.toUpperCase();
});
</script>
额外建议
- 服务端仍需做大小写归一化校验（不能只依赖前端）
- 如支持扫码或粘贴，
input事件已覆盖，无需额外监听paste - 若需限制只能输入字母数字，可补充
pattern="[A-Za-z0-9]*"和inputmode="text"
