AI 聊天框回车发送总误触：compositionend、isComposing 与中文输入法兼容

AI 聊天框里最常见的“偶发 bug”之一，是用户用拼音输入“天气怎么样”，候选词还没确认就按了回车，消息直接发出去，输入框里只剩半句话。问题根本不在大模型接口，而是键盘事件和中文输入法的组合状态没有做拆分处理。

回车发送前先判断输入法是否仍在组合状态：组合期间的 Enter 只用来确认候选词，compositionend 之后触发的 Enter 才有资格提交消息；同时保留点击发送和移动端换行的操作路径。

为什么中文输入法会让 Enter 失控

用拼音输入时，用户敲下的字母先进入输入法的临时组合区，浏览器随后收到 compositionstart、compositionupdate 等事件。等候选词确认后才会触发 compositionend。如果业务代码只监听 keydown，就很容易把“确认候选词”的 Enter 误判成“发送消息”指令。

这里不能只靠“延迟 100 毫秒再发送”碰运气，不同系统和输入法的事件顺序、响应延迟都有差异，应该直接读取事件本身提供的组合状态标识。

用 composition 状态挡住误发送

可以用一个布尔值记录输入区的组合状态是否打开，再在键盘事件回调里检查 event.isComposing。后者在符合标准的浏览器里能直接返回事件是否发生在文本组合阶段，手动维护的布尔值则负责覆盖事件之间的状态空档。

const composer = document.querySelector("#composer");
const sendButton = document.querySelector("#send");
let composing = false;

composer.addEventListener("compositionstart", () => {
  composing = true;
});

composer.addEventListener("compositionend", () => {
  composing = false;
});

composer.addEventListener("keydown", (event) => {
  const enterPressed = event.key === "Enter";
  const composingNow = composing || event.isComposing;
  if (!enterPressed || composingNow) return;
  if (event.shiftKey) return;
  event.preventDefault();
  submitMessage();
});

如果输入框是多行 textarea，可以把“Enter 发送、Shift+Enter 换行”做成明确的可配置项。无论默认值怎么设置，对应的提示文案都要放在输入框附近，不要让用户自己猜快捷键规则。

让点击发送和键盘发送走同一条路径

键盘事件处理逻辑只负责识别用户意图，真正的发送逻辑单独抽成公共函数。这样点击发送按钮、按回车、移动端点提交，都能共享空值校验、提交禁用状态和输入框清空逻辑。

function submitMessage() {
  const text = composer.value.trim();
  if (!text || sendButton.disabled) return;
  sendButton.disabled = true;
  sendButton.textContent = "发送中…";

  sendToModel(text)
    .finally(() => {
      sendButton.disabled = false;
      sendButton.textContent = "发送";
    });
}

sendButton.addEventListener("click", submitMessage);
composer.form?.addEventListener("submit", (event) => {
  event.preventDefault();
  submitMessage();
});

表单原生的 submit 事件值得保留，它覆盖了按钮点击、键盘提交和辅助技术操作的全部场景。如果产品需要实现 Shift+Enter 换行，就只在 keydown 里做快捷键判断，不能在 submit 里反向猜测用户的触发来源。

可访问性和移动端要单独验收

发送按钮要有清晰的可见名称，发送过程中要同步更新禁用状态和提示文本。输入框可以通过 aria-describedby 关联“Enter 发送，Shift+Enter 换行”的说明文字，但不要把复杂快捷键当成唯一操作方式。

• 中文输入法：候选词确认过程中不会直接发送消息。
• 英文输入：普通 Enter 按产品预设规则提交。
• 移动端：软键盘 action 按钮与多行文本换行行为要在真机上验证。
• 粘贴文本：粘贴操作不会触发组合事件，也不能因为粘贴后焦点变化自动提交。
• 屏幕阅读器：发送中、发送成功和失败都要有对应的文本状态反馈。

四个样本就能抓住大多数回车 bug

测试不要只在英文键盘下按几次 Enter 就结束。至少覆盖拼音候选词输入、日文输入法输入、纯英文输入、多行文本编辑和移动端软键盘场景；每个测试样本都要记录最终发出的消息内容和实际发送次数。

const cases = [
  { name: "拼音候选未确认", composing: true, shouldSend: false },
  { name: "候选确认后回车", composing: false, shouldSend: true },
  { name: "Shift+Enter", composing: false, shouldSend: false },
  { name: "空白文本", composing: false, shouldSend: false }
];

常见问题

只判断 event.isComposing 够不够？

多数现代浏览器环境下够用，但通过 compositionstart/compositionend 手动维护组合状态会更稳妥，也便于处理不同浏览器事件顺序差异和自动化测试的模拟事件场景。

为什么 keyCode === 13 的写法不推荐？

keyCode 是旧式键盘属性，语义表达远不如 event.key === "Enter" 清晰。新编写的代码应该使用标准键值属性和组合状态判断逻辑。

AI 聊天框一定要 Enter 发送吗？

不一定。面向长文本输入场景，多行编辑器搭配一个醒目的发送按钮往往体验更好；如果要使用快捷键，也要同时提供可见说明和点击操作路径。

compositionend 之后能不能自动发送？

不建议这么做。compositionend 只代表用户刚确认完候选词，不代表用户想要立刻提交整段消息。应该等待用户下一次明确的发送操作指令。

总结

中文输入法不是键盘事件的异常分支，而是文本输入的正常必经阶段。用 compositionstart/compositionend 记录状态，用 isComposing 拦截组合期间触发的 Enter，再把所有提交动作汇聚到同一个公共函数，AI 聊天框就能同时兼顾中文输入习惯、英文快捷键规则、移动端操作和辅助设备适配需求。