autocapitalize仅对可编辑文本控件生效，如<input type="text">、<input type="email">、<textarea>及contenteditable="true"元素；对只读、type="number"或禁用状态无效，且主要在iOS Safari和部分Android浏览器中起作用，桌面端基本忽略。
autocapitalize 在哪些输入场景下生效
这个属性只对可编辑的文本输入控件起作用，比如 <input type="text">、<input type="email">、<textarea>，以及设置了 contenteditable="true" 的元素。它对只读字段、<input type="number"> 或禁用状态（disabled）完全无效。
- iOS Safari 和部分 Android 浏览器（如 Chrome 90+）支持该属性，但桌面端浏览器基本忽略
- 它影响的是软键盘的默认首字母行为，不改变实际输入值或触发 JavaScript 事件
- 如果同时设置了
autocomplete="off"或spellcheck="false"，某些旧版 iOS 可能会弱化首字母大写逻辑
autocapitalize 的合法取值和对应行为
取值是区分大小写的字符串，常见值有四个，实际效果取决于系统键盘策略：
-
"none"：强制关闭首字母大写，适合密码、URL、代码等场景 -
"sentences"：每句开头大写（iOS 默认值），适用于普通文本输入 -
"words"：每个单词首字母大写，适合姓名、标题等 -
"characters"：所有字母大写，类似 Caps Lock，适合缩写或编号（如 “ABC123”）
注意：Chrome for Android 目前只识别 "sentences" 和 "none"，其他值会被当作 "sentences" 处理；Safari 对 "characters" 支持较稳定。
与 inputmode 配合使用时的注意事项
autocapitalize 和 inputmode 是独立控制软键盘行为的两个属性，但它们可能互相干扰：
立即学习“前端免费学习笔记（深入）”；
-
inputmode="numeric"或inputmode="tel"会覆盖autocapitalize，键盘直接切换为数字布局，首字母设置失效 -
inputmode="text"时，autocapitalize才真正起效 - 在表单中混用多个输入类型时，别假设
autocapitalize全局生效——它只作用于当前元素，且无法继承
示例：
<input type="text" inputmode="text" autocapitalize="words">
<input type="text" inputmode="numeric" autocapitalize="sentences"> <!-- autocapitalize 被忽略 -->
为什么加了 autocapitalize 却没反应
最常被忽略的是平台兼容性与上下文限制：
- 页面未在移动端真实环境测试（桌面模拟器不触发软键盘逻辑）
- 输入框被包裹在 Shadow DOM 中，部分 iOS 版本不透传该属性
- 使用了第三方 UI 库（如 React 的受控组件），但未将
autocapitalize显式透传到原生<input> - 同一页面多个同名属性冲突，例如通过 JS 动态设置时覆盖了 HTML 属性，而新值未被键盘引擎重新读取
真机调试时建议直接 inspect 元素，确认渲染后的 DOM 上是否保留 autocapitalize 属性，且值拼写准确、无空格、无引号残留。
iOS 键盘行为高度依赖系统版本和语言设置，同一段 HTML 在 iOS 16 和 iOS 17 上表现可能不同，不要只测一个版本。
