发送按钮必须用并置于内，以确保键盘回车触发、屏幕阅读器识别、禁用状态可靠及移动端点击体验。
发送按钮必须用 <button></button>，别用 <div> 或 <code><a></a>
可访问性和语义正确性直接决定用户能否用键盘（如回车）触发发送，以及屏幕阅读器能否识别操作意图。用 <div> 绑定 <code>click 事件看似可行，但无法聚焦、不响应 Enter 键、在表单中不自动提交，还会让键盘用户卡住。
正确做法是把按钮放在 <form></form> 内，并设 type="submit"：
- 即使不用传统表单提交，也建议保留
<form></form>结构——它天然支持回车触发、禁用状态统一管理、无障碍语义完整 - 避免写
type="button"后手动监听keydown拦截Enter，容易漏掉Shift+Enter换行等交互细节 - 若需禁用按钮（如发送中），直接设
disabled属性，比 CSS 隐藏或 JS 判断更可靠
按钮文案和 ARIA 标签要区分「空输入」和「发送中」状态
用户看到“发送”却点不动，或输入为空时仍能点击但无反馈，都会引发困惑。按钮的文本和 aria-label 必须随状态动态更新。
- 输入为空时，按钮应设
disabled，且aria-label改为“请输入消息后发送”，而非仅视觉上灰掉 - 发送中状态：设
disabled+ 文案改为“发送中…” +aria-busy="true"，避免屏幕阅读器重复播报旧 label - 不要只靠 CSS 改文字颜色或透明度来“禁用”，必须用
disabled属性，否则键盘仍可聚焦并触发
移动端点击区域至少 44×44px，且避免与输入框紧贴
小屏设备上，手指误触、点击偏移很常见。按钮尺寸和位置直接影响发送成功率。
- 用
min-width和min-height保证点击区域 ≥ 44px，配合padding而非仅靠字体大小撑开 - 按钮右侧或下方留出足够间距（建议 ≥ 8px），防止手指滑动时误触输入框导致光标跳走
- 避免把按钮固定在输入框右侧且宽度随输入内容缩放——输入长消息时按钮可能被挤到视野外或变窄
- iOS Safari 对
position: fixed按钮在软键盘弹起时有渲染偏移问题，优先用 flex 布局内嵌，而非绝对定位
点击后立刻禁用，但需防重复提交和网络失败恢复
用户狂点发送按钮不是操作失误，而是对响应延迟的自然反应。前端必须主动拦截，而不是等后端返回再处理。
- 监听
submit事件后第一件事就是event.preventDefault()+ 设按钮disabled，防止连点 - 若请求失败（如 500、超时），需手动恢复按钮可用状态，并保留输入框内容，不能清空后让用户重打
- 避免用
setTimeout延迟恢复按钮——网络慢时用户会以为没点上，继续猛点；应等接口明确返回后再恢复 - 如果用 WebSocket 发送，成功回调里恢复按钮；若用 fetch，则在
finally块里恢复，但注意：仅当发送成功才清空输入框
按钮不是装饰品，它是整个聊天流程里最常被高频、多方式（键盘/手指/辅助工具）触发的控制点。任何绕过原生语义、忽略状态同步或低估移动端物理交互的设计，都会在真实场景里立刻暴露。
