autocapitalize 是 html input/textarea 的非标准但广泛支持的移动端键盘首字母大写提示属性,ios safari、chrome for android、firefox for android 均支持;取值有 sentences、words、characters、none,其中 none 必须用于密码等字段以避免误输。

autocapitalize 是什么,哪些浏览器支持
autocapitalize 是 HTML input 和 textarea 的非标准但被广泛实现的属性,用于提示移动端键盘是否自动大写首字母。它不是 HTML 规范正式推荐的属性(已由 inputmode 和 autocorrect 等更现代属性部分替代),但 iOS Safari、Chrome for Android、Firefox for Android 目前都支持。
- iOS 12.2+ 默认启用该属性,旧版可能忽略
- Android Chrome 75+ 支持,但行为依赖系统键盘(Gboard 响应较好,三星键盘有时忽略)
- 不影响桌面端,也不会改变实际输入值,只是键盘 UI 提示
可用值及对应效果
不同值会触发键盘首字母大写策略,但实际表现因系统而异:
-
"sentences":每句开头大写(iOS 默认行为,多数键盘支持) -
"words":每个单词首字母大写(如姓名、标题场景) -
"characters":全部大写(类似 Caps Lock,适合缩写、代码等) -
"none":禁用自动大写(推荐用于密码、邮箱、URL 等字段)
注意:autocapitalize="off" 是无效写法,必须用 "none"。
和 autocomplete、autocorrect 的关系
这三个属性常一起出现,但职责不同:
-
autocomplete控制浏览器是否填充历史/凭证(如autocomplete="email") -
autocorrect控制拼写自动修正(autocorrect="on"/"off") -
autocapitalize仅影响键盘首字母策略,不干预内容逻辑
常见组合示例:
- 邮箱输入:
<input type="email" autocapitalize="none" autocorrect="off" autocomplete="email"> - 用户昵称(希望单词首字母大写):
<input autocapitalize="words" autocomplete="name"> - 密码框必须加
autocapitalize="none",否则 iOS 键盘可能默认开启首字母大写,造成误输
为什么有时不生效?排查要点
- 键盘本身不支持该提示(如某些定制 Android ROM 或第三方输入法)
-
type 属性冲突:例如 type="number" 或 type="tel" 会忽略 autocapitalize,因为数字键盘无大小写概念
- 被 CSS 或 JS 干扰:比如
text-transform: uppercase 只改显示,不影响键盘;而 JS 强制转大写可能掩盖问题,但不该替代原生控制
- 混用
inputmode:若同时设了 inputmode="text",一般不影响;但 inputmode="numeric" 会覆盖 autocapitalize
type 属性冲突:例如 type="number" 或 type="tel" 会忽略 autocapitalize,因为数字键盘无大小写概念text-transform: uppercase 只改显示,不影响键盘;而 JS 强制转大写可能掩盖问题,但不该替代原生控制inputmode:若同时设了 inputmode="text",一般不影响;但 inputmode="numeric" 会覆盖 autocapitalize
移动端测试时,务必真机验证——模拟器或 DevTools 的设备模式无法准确反映键盘行为。
实际项目里最容易被忽略的是:密码字段没加 autocapitalize="none",用户在 iOS 上第一次输密码时习惯性按首字母,结果输成大写还浑然不觉。
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!











