autocapitalize 是告知软键盘是否及如何启用首字母大写的提示指令,非强制大写工具;其值需严格匹配输入内容类型(如 off 用于密码、words 用于英文姓名),且易被 JS 转换、组件封装、type 或 inputmode 覆盖,须在真机多输入法下验证生效。

autocapitalize 不是“让输入变大写”的工具,它是告诉软键盘“该不该、怎么弹出首字母大写”的提示指令——写对了不保证生效,写错了也不报错,90% 的问题出在覆盖或忽略上。
autocapitalize 值选错,键盘行为就错
值必须匹配真实输入内容,不是按“想不想大写”拍脑袋定的:
-
off或none:密码、用户名、URL 路径、邮箱本地部分(user@domain.com中的user)必须用。iOS 默认对type="text"开启首字母大写,不设这个,用户输password123就可能卡在登录环节 -
words:英文姓名(Zhang San)、品牌名、标题;中文拼音输入法可能响应(zhang san→Zhang San),但别依赖它做数据校验 -
sentences:纯英文评论、反馈类<textarea></textarea>;iOS 支持稳定,Android 多数 WebView 只识别英文标点(.?!),对中文句号「。」基本无反应 -
characters:序列号、验证码、SKU(如SKU-ABC123);它只影响键盘实时输入,粘贴进来的sku-abc123仍是小写
写了 autocapitalize 却没反应?大概率被盖掉了
它不是 CSS,不报错也不警告,失效时你根本看不到提示:
- JS 里写了
e.target.value = e.target.value.toLowerCase()—— 键盘刚输的大写,被 JS 立刻转回小写,光标还跳 - 用了 Vant / Ant Design Mobile 等封装组件,但没透传属性:
<van-field :input-props="{ autocapitalize: 'off' }"></van-field>才有效 - 把
autocapitalize写在<form></form>上想“全局控制”,但 iOS Safari 不支持继承,必须每个<input>单独写 -
type="number"或inputmode="numeric"下该属性完全被忽略——数字键盘压根没有大小写切换能力
必须和 autocorrect、type 配合才稳
单独设 autocapitalize 是低效的,它常被其他属性覆盖或削弱:
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记(深入)”;
-
type="email"默认隐式启用autocapitalize="none",再显式写autocapitalize="off"没问题但没必要;而type="password"旧版 iOS(iOS 12 前)仍有例外,保险起见仍要加autocapitalize="off" autocorrect="off" -
autocorrect="off"必须和autocapitalize="off"配套:否则即使首字母不自动大写,拼写纠正仍可能把"user"改成"User" -
inputmode="text"才让autocapitalize生效;inputmode="numeric"或inputmode="tel"会直接切到数字键盘,首字母设置彻底失效
桌面端不生效,Shadow DOM 和 React 容易漏
这不是 bug,是设计使然——它只作用于移动端软键盘:
- 桌面浏览器(Chrome/Firefox/Edge)基本忽略
autocapitalize,别在 DevTools 里模拟测试 - 输入框被包裹在 Shadow DOM 中,部分 iOS 版本不透传该属性,得手动从 host 向 slot 透传
- React 项目里必须写
autocorrect="off",不能写成autoCorrect="off"—— React 会把驼峰转小写,但原生属性名就是小写,写错就等于没写 - Formik、Ant Design 等表单库可能自动删掉这些属性,得检查最终渲染出的 DOM 是否真有
autocapitalize
真正难的不是写对值,而是确认它没被 JS、组件、type、inputmode 或系统输入法开关悄悄关掉——每次改完,务必在真机上用不同输入法(搜狗、Gboard、iOS 原生)测一遍。


















