最可靠方案是autocapitalize="off"配合input事件监听并调用tolowercase()，因css的text-transform仅视觉转换，不改变实际value值。
直接用 autocapitalize="off" + input 事件监听转小写最可靠，CSS 的 text-transform: lowercase 只是视觉欺骗，后端拿不到小写值。
autocapitalize="off" 是第一步，但只管键盘行为
这个属性告诉 iOS/Android 虚拟键盘：别自动大写首字母。它本身不改变输入值，只是避免用户一输就弹出大写键。对 type="email"、type="password" 或用户名字段尤其有用。
- 必须写在每个
<input>上，<form></form>上设无效 -
type="number"、inputmode="numeric"下该属性被完全忽略（数字键盘无大小写） - 和
autocorrect="off"搭配用更干净，比如邮箱登录：<input type="email" autocapitalize="off" autocorrect="off">
input 事件里调 toLowerCase() 才真正改 value
用 input 事件（不是 keyup 或 blur），才能覆盖粘贴、拖入、IME 输入、语音转文字等所有路径。光标位置也要手动保持，否则会跳到末尾。
- 别用
oninput写在 HTML 里，容易污染、难维护；推荐 JS 绑定：input.addEventListener('input', e => { ... }) - 必须保存并恢复光标位置，否则中文输入或中间编辑会错乱：
const start = e.target.selectionStart; const end = e.target.selectionEnd;→ 改完值 →e.target.setSelectionRange(start, end) - 对含 emoji、带重音字符（如
café）也安全，toLowerCase()在现代浏览器中 locale-aware，不会崩
为什么不用 text-transform: lowercase？
它只改显示样式，DOM 中的 value 仍是原始大小写。后端收到的、JS 用 input.value 读到的、正则校验用的，全都是小写前的原始字符串。
- 例如用户输入
ABC123，加了style="text-transform: lowercase"后页面看起来是abc123，但input.value还是"ABC123" - 验证码、序列号、API 参数校验等场景下，这会导致前后端比对失败
- 屏幕阅读器读出的也是原始值，无障碍体验受损
封装成可复用的函数要注意边界
如果项目里多个输入框要转小写，建议封装但别全局劫持所有 input。加个 data 属性精准控制，比如 data-lowercase。
- 示例：
<input type="text" data-lowercase>，然后 JS 查找：document.querySelectorAll('input[data-lowercase]') - 避免对
type="password"或带 mask 的字段误处理（虽然转小写本身无害，但逻辑上不该干预密码输入） - 如果字段需兼容 IE11，
selectionStart/selectionEnd需 fallback 到createTextRange，但 2026 年多数项目已可放弃
真正关键的点是：autocapitalize 控键盘，input 事件控值，二者缺一不可；而 CSS 样式只是“假装小写”，别让它混进业务逻辑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
