input标签无原生自动转小写属性，autocapitalize仅控制键盘首字母行为；必须用JavaScript监听input事件实时调用toLowerCase()并保持光标位置，配合autocapitalize="off"才能真正实现输入即小写。
input 标签本身没有自动转小写的原生属性，靠 autocapitalize 只能控制键盘首字母行为，不能强制转小写；真要“输入即小写”，必须用 JavaScript 拦截并重写 value。
用 input 事件实时转小写（推荐）
这是最可靠的方式，覆盖所有输入来源：键盘、粘贴、拖拽、IME 输入（如中文拼音）、剪贴板插入等。
- 必须监听
input事件，不是keyup或change——前者漏掉粘贴，后者只在失焦时触发 - 需手动保存和恢复光标位置，否则用户编辑中间内容时，光标会跳到末尾
- 对含 emoji、带变音符号的字符（如
café）也安全，toLowerCase()在现代浏览器中 locale-aware 行为稳定
const field = document.querySelector('input[data-lowercase]');
field.addEventListener('input', (e) => {
const start = e.target.selectionStart;
const end = e.target.selectionEnd;
e.target.value = e.target.value.toLowerCase();
e.target.setSelectionRange(start, end);
});
为什么不用 text-transform: lowercase？
这个 CSS 只是视觉欺骗，实际 input.value 仍是原始大小写。后端收到的、JS 读取的、表单提交的，全都不变——验证码比对失败、用户名校验不通过、API 返回 400 都可能因此发生。
-
text-transform不影响 DOM 的value属性值 - 用户复制粘贴进来的
ABC依然保持大写 - 屏幕阅读器读出的仍是原始大小写，无障碍体验受损
autocapitalize="off" 和 JS 转小写要一起用
单独设 autocapitalize="off" 只告诉键盘“别自动大写”，但不阻止用户按住 Shift 手动输大写；而 JS 转小写会覆盖它。两者配合才真正闭环。
立即学习“前端免费学习笔记（深入）”；
-
autocapitalize="off"是给移动端软键盘的提示，iOS/Android 键盘响应更及时 - JS 转小写是兜底逻辑，确保无论怎么输，最终值都是小写
- 别把
autocapitalize写在form上——它不继承，每个input得单独写 -
type="email"或type="password"下，autocapitalize默认已为off，但显式写上更保险
容易踩的坑：组件封装导致属性丢失
用 Vant、Ant Design Mobile、Element Plus 等 UI 库时，autocapitalize 和自定义事件监听常被封装层拦截。
- React/Vue 组件通常不自动透传原生属性，得查文档看是否支持
inputProps或attrs透传 - 例如 Vant 的
<van-field>需写成：:input-props="{ autocapitalize: 'off' }" - 监听事件也要绑定在真实
input元素上，不是组件根元素——可用ref或querySelector获取底层input
真正难的不是写那三行 JS，而是确认它在所有输入路径下都生效，且不破坏光标、不干扰 IME、不和封装组件打架。测一遍粘贴、长按选中修改、中英文混输，比写代码花的时间还多。
