autocapitalize仅在ios safari和chrome for android等移动端浏览器有效，桌面端chrome/firefox忽略；需配合type=”text”/”email”/”password”等使用，且依赖软键盘支持。
autocapitalize 在哪些浏览器里有效
这个属性只在移动端浏览器（iOS Safari、Chrome for Android）起作用，桌面端 Chrome/Firefox 完全忽略它。iOS 上对 <input> 和 <textarea></textarea> 都支持，但 Android 各厂商键盘行为不一致——部分国产键盘（如华为、小米）压根不读这个属性，只认系统设置。
常见错误现象：autocapitalize="sentences" 写了却还是小写开头，大概率是测试环境错了，拿 PC 浏览器调试没意义。
- 真机测试必须用 iOS 或原生 Android（Pixel）设备
- 模拟器（如 xcode Simulator）能反映 iOS 行为，但部分 Android 模拟器不触发
- 不要和
text-transform: uppercase混用——后者只改显示，不改实际值，且对输入框内容无影响
autocapitalize 的合法值和对应行为
它不是 CSS 属性，不能用连字符或驼峰；值必须是字符串字面量，大小写敏感。四个标准值中，off 和 none 效果相同（禁用自动大写），但 none 是旧规范写法，建议统一用 off。
使用场景举例：
立即学习“前端免费学习笔记（深入）”；
- 密码输入框：必须设
autocapitalize="off"，否则 iOS 默认首字母大写，用户易输错 - 邮箱地址：用
autocapitalize="none"或off，避免把user@domain.com错输成User@domain.com - 中文混输姓名：设
autocapitalize="words"，让每个汉字拼音首字母大写（实际效果取决于键盘实现，非强制）
注意：sentences 并不会智能识别句号后自动大写，只是告诉键盘“按句子逻辑处理”，而多数中文键盘根本不响应这个指令。
为什么加了 autocapitalize 还没反应
最常被忽略的是：该属性只对聚焦状态下的软键盘生效，且依赖 type 属性配合。比如 type="number" 或 type="tel" 时，iOS 会强制忽略 autocapitalize，因为数字键盘本身不提供大小写切换。
- 有效组合：只有
type="text"、type="search"、type="url"、type="email"、type="password"才可能触发 - 如果用了
inputmode="numeric"，即使type="text"，也会降级为数字键盘，autocapitalize失效 - React/Vue 等框架中动态设置该属性（如
:autocapitalize="mode"）需确保渲染时属性已存在，服务端渲染缺失会导致首次加载不生效
替代方案：纯前端控制大小写转换
当 autocapitalize 不可控时，得靠 js 补位。但要注意：不能直接监听 input 事件并修改 value，这会破坏用户光标位置、粘贴体验，且在 iOS 上可能引发输入延迟。
更稳妥的做法是用 beforeinput（兼容性稍差）或劫持粘贴行为：
- 对邮箱/用户名等字段，用
onblur统一转小写：el.value = el.value.toLowerCase() - 需要实时转换的场景（如搜索关键词首字母大写），用
input+setSelectionRange保光标：el.addEventListener('input', () => { const pos = el.selectionStart; el.value = el.value.charAt(0).toUpperCase() + el.value.slice(1).toLowerCase(); el.setSelectionRange(pos, pos); }); - 永远别用
text-transform替代真实值转换——后端收到的仍是原始大小写
复杂点在于：不同语言的大小写规则（如土耳其语 İ/i）无法靠 toLowerCase() 正确处理，真有国际化需求，得用 Intl API 或专门库。