按钮文字首字母大写应优先用 text-transform: capitalize，它仅影响渲染、不改变实际值，适合静态文案；对中文无效但中英混排仍可统一视觉节奏；全大写需慎用 uppercase；autocapitalize 在 button 上无效。
按钮文字首字母大写，不是靠 JavaScript 拦截输入或改 value，而是用 text-transform: capitalize 控制显示样式——它只影响渲染，不改变实际值，适合按钮这类纯展示场景。
button 标签里用 text-transform: capitalize 最稳妥
按钮内容通常是静态文案（如“提交”“取消”“编辑”），没有用户输入逻辑，text-transform: capitalize 直接生效、无兼容性风险、不干扰表单行为。
- 对中文无效，但按钮文案多为英文或中英混排，首词英文时仍可统一视觉节奏
- 不要用
text-transform: uppercase除非真要全大写——它会让 “Login” 变成 “LOGIN”，失去可读性 - 避免在 button 上设
autocapitalize，该属性只对<input>和<textarea></textarea>生效，button 上写等于白写
想让按钮文字“第一个字母大写、其余小写”得用 JS 处理字符串
text-transform: capitalize 是“每个单词首字母大写”，而像 “login form” 会变成 “Login Form”，如果你明确只要整个字符串首字母大写（即 “Login form”），就得预处理文本。
- 用
str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()最简明 - 注意：若原始字符串含 HTML 实体（如
&）或 Unicode 符号（如 emoji），slice(1)可能切错位置；生产环境建议加边界判断 - 别在 click 事件里动态改 innerText——按钮文案一般初始化就定好，运行时修改反而增加 DOM 重绘开销
别在 button 上滥用 autocapitalize 属性
autocapitalize 是给软键盘发提示的，只作用于可编辑元素。button 不接受输入，iOS/Android 都会忽略这个属性。
- 写了
autocapitalize="sentences"或off在 button 上，DevTools 里能看到属性，但毫无效果 - 如果误把 button 当成 input 改写成
<button contenteditable="true"></button>，那确实能触发 autocapitalize，但破坏语义、带来焦点和可访问性问题，不推荐 - 真正需要首字母控制的是表单字段，不是按钮——检查你是不是把需求对象搞错了
最常被忽略的一点：按钮文案大小写是设计决策，不是技术问题。CSS 控制显示，JS 处理逻辑值，二者职责分明。强行用 JS 改 value 或监听 input 事件去“矫正”按钮文字，说明前端结构可能已经偏离语义化初衷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
