autocapitalize是HTML5中用于控制移动端虚拟键盘首字母大写的原生属性，支持off/none、sentences、words、characters四个值，仅对input和textarea生效，不依赖JS且不影响实际输入值。
Autocapitalize 是 HTML5 中 <input> 和 <textarea> 元素的非标准但被主流移动端浏览器（iOS Safari、Chrome for Android 等）广泛支持的属性，用于控制虚拟键盘在输入时是否自动将首字母大写。它不依赖 JavaScript，纯 HTML 控制，对提升表单体验很实用。
autocapitalize 支持的取值及作用
该属性接受以下字符串值（大小写不敏感），不同值影响键盘行为和输入逻辑：
- off / none：关闭自动大写，键盘始终小写（如密码、邮箱用户名）
- sentences：每句话开头自动大写（句号、问号、感叹号后跟空格再输入时触发）
- words：每个单词首字母自动大写（适合姓名、标题等）
- characters：每个字符都转为大写（类似全大写模式，常用于缩写或代码输入）
常见使用场景与写法示例
直接在 input 标签中添加属性即可生效，无需额外脚本：
- 姓名输入（每个词首字母大写）：
<input type="text" autocapitalize="words" placeholder="请输入姓名"> - 句子描述（仅句首大写）：
<textarea autocapitalize="sentences"></textarea> - 邮箱用户名（禁用大写，避免误输）：
<input type="email" autocapitalize="off"> - 验证码或序列号（强制大写）：
<input type="text" autocapitalize="characters">
注意事项与兼容性提示
该属性属于 Webkit 扩展规范，目前未纳入 W3C 正式标准，但已被 iOS 和 Android 主流 WebView 广泛实现。需注意：
立即学习“前端免费学习笔记（深入）”；
- 桌面浏览器基本忽略此属性，仅移动端生效
- 在 iOS 上效果最稳定；Android 各厂商键盘支持程度略有差异（如三星键盘可能部分忽略
words） - 不能替代服务端校验——仅影响输入体验，提交内容仍需按业务规则做大小写处理
- 与
autocorrect、spellcheck可组合使用，例如：autocapitalize="sentences" autocorrect="on" spellcheck="true"
与 text-transform 的区别
autocapitalize 控制的是 输入时键盘行为和初始字符大小写，而 CSS 的 text-transform: capitalize 仅改变视觉渲染（实际值仍是小写）。例如：
- 设
autocapitalize="words"→ 用户输入 “john doe” 时，键盘会自动把 j 和 d 弹出为大写，DOM 中的value值就是 "John Doe" - 仅设
style="text-transform: capitalize"→ 输入始终是小写，只是显示像大写，value仍是 "john doe"
因此，需要真实数据大写时，必须用 autocapitalize 或服务端/JS 处理，CSS 方案不可靠。
