必须用autocapitalize="none"(而非"off")配合autocorrect="off",因ios safari默认对text类型首字母大写,邮箱/账号区分大小写,否则输入john123被转为john123导致后端校验失败;type="number"等数字类型会忽略该属性。

autocapitalize="none"为什么必须加在邮箱和账号输入框上
因为 iOS Safari 默认对 type="text" 启用首字母大写,而邮箱本地部分(user@domain.com 中的 user)和账号名通常区分大小写——用户输 john123 却被键盘自动变成 John123,后端校验直接失败。这不是“体验小问题”,是登录/注册流程卡死的常见原因。
autocapitalize="none" 和 autocapitalize="off" 哪个该用
必须用 autocapitalize="none"。autocapitalize="off" 是无效写法,浏览器会忽略它。虽然部分文档里混用,但实测中只有 "none" 被 iOS 12.2+、Chrome for Android 75+ 正确识别。旧项目若还见 "off",应立刻替换。
只写 autocapitalize="none" 就够了吗
不够。它只管键盘首字母提示,不管拼写修正。邮箱和账号字段必须搭配 autocorrect="off",否则 iOS 可能把 gmail 自动改成 Gmail,哪怕你已经关了首字母大写。
-
type="email"默认隐式启用autocapitalize="none",但不保险,仍建议显式写上 -
type="text"且用于账号(如用户名、昵称)时,autocapitalize="none"+autocorrect="off"是硬性组合 - 别依赖
autocomplete="username"或name="username"来触发正确行为——它们和大小写控制无关
哪些情况会让 autocapitalize="none" 失效
最常踩的坑不是属性写错,而是被其他机制覆盖:
-
type="number"、type="tel"、inputmode="numeric"下该属性完全被忽略(数字键盘无大小写) - 用 Vue/React 封装的组件(如 Vant 的
<van-field></van-field>)没透传autocapitalize属性,需查文档确认是否支持input-props配置 - CSS 的
text-transform: uppercase不会影响它,但 JS 直接改input.value可能干扰光标位置,掩盖真实问题
真正生效的信号只有一个:你在 iOS 键盘上看到左下角的「abc」键始终是小写状态,且长按不会弹出大写选项——这才是 autocapitalize="none" 在起作用。
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!











