autocapitalize 是向键盘提供建议的属性,非强制开关;iOS 支持较好,Android 依赖输入法,需配合 type="text" 和 autocorrect="on" 才稳定生效,且不改变实际输入值。

autocapitalize 不是开关,只是向键盘“提个醒”;它在 iOS 上最靠谱,在 Android 上基本看输入法脸色,写对了也不保证生效。
autocapitalize 值怎么选才不翻车
值不是语法问题,而是匹配真实输入意图:
-
none:密码、验证码、用户名、API key 等必须全小写字段(off语义模糊,别用) -
sentences:英文反馈、评论类<textarea>;iOS 支持稳定,但只识别.?!+ 空格组合,中文句号「。」完全无效 -
words:英文姓名、标题、品牌名;注意双击编辑单词时 iOS 可能重置首字母为小写 -
characters:SKU、序列号、缩写码(如ABC-123);键盘显示大写,但粘贴abc-123还是原样
写了 autocapitalize 却没反应?大概率被覆盖了
90% 的“失效”不是属性写错,而是被更高优先级机制压制:
- JS 监听
input事件并执行e.target.value = e.target.value.toLowerCase()—— 键盘刚输的大写立刻被干掉 - 用了 Vant / Ant Design Mobile 等封装组件,但没透传属性:
:input-props="{ autocapitalize: 'none' }"才有效 -
type="password"或type="number"下该属性直接被忽略(数字键盘无大小写概念) -
autocorrect="off"会连带禁用autocapitalize(尤其旧版 WebKit)
必须和 type / autocorrect 配合才能稳住
单独写 autocapitalize 是低效的:
立即学习“前端免费学习笔记(深入)”;
-
type="email"默认隐式启用autocapitalize="none",再显式写一遍没问题,但没必要 -
type="text"+autocorrect="on"是autocapitalize生效的基础组合;autocorrect="off"会让 iOS 认为你不需要任何输入辅助 -
inputmode="numeric"或inputmode="decimal"会直接覆盖autocapitalize,哪怕值是words
真要确保首字母大写,得靠 JS 或后端补一手
autocapitalize 对中文拼音输入法无效,对粘贴、拖拽、脚本赋值也完全无感:
- 姓名字段想强制
"zhang san" → "Zhang San",得监听input事件,用.replace(/(^|\s)\w/g, c => c.toUpperCase()),还要手动维护光标位置 - 服务端永远要按需做格式化(比如 PHP 的
ucwords()、Node.js 的正则替换),不能信前端传来的 value - 如果业务强依赖格式(如注册姓名校验),
autocapitalize="words"只能当体验加分项,不是数据保障
最常被忽略的一点:它不改变实际输入值,只影响键盘提示状态;而用户永远可以切小写、粘贴小写、甚至绕过键盘直接改 DOM。



















