### [表单输入自动转大写：用 toUpperCase 处理](https://www.huociguo.com/article/1880)

**Published:** 2026-10-04T03:22:48

**Author:** 米了

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

![表单输入自动转大写示意](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-6143822.jpeg)

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

❌ 误区一：用 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` 与正则校验；需要保留小写输入的场景，不要全局转换，改为提交时统一处理。

**Tags:** input 事件, text-transform, toUpperCase, 光标位置维护, 表单转大写

**Categories:** HTML5

---