表单输入自动转大写：用 toUpperCase 处理

表单要求用户输入大写（如车牌、验证码），常见做法是实时转换。下面几个误区会导致数据或体验异常。

❌ 误区一：用 CSS text-transform: uppercase

该属性只改显示，提交值与 DOM value 仍是小写，后端拿到的是原始小写。它适合纯展示，不适合作为数据来源。

❌ 误区二：用 autocapitalize='characters'

这是移动端软键盘提示，部分桌面浏览器忽略，且只影响输入法行为，不改变已输入值的真实大小写。

✅ 正解：监听 input 事件

el.addEventListener('input', () => {
  const start = el.selectionStart;
  el.value = el.value.toUpperCase();
  el.setSelectionRange(start, start);
});

toUpperCase() 直接改写 value，提交即为大写。

⚠️ 光标回跳

value 重赋值会把光标移到末尾，中文或中间插入时体验差。正解里用 selectionStart 记录并重设 setSelectionRange，光标留在原位。

📌 边界

仅允许大写时，可叠加 maxlength 与正则校验；需要保留小写输入的场景，不要全局转换，改为提交时统一处理。