本文详解如何让文本输入框在用户按下回车键（enter）时触发与点击提交按钮相同的操作，避免重复逻辑，提升聊天界面等交互场景的用户体验。

本文详解如何让文本输入框在用户按下回车键（enter）时触发与点击提交按钮相同的操作，避免重复逻辑，提升聊天界面等交互场景的用户体验。

在基于 Bootstrap 构建的聊天输入组件中，仅依赖按钮点击（click）事件会导致交互不完整——用户习惯性按 Enter 提交却无响应，严重影响可用性。正确做法是将提交逻辑封装为独立函数，并分别绑定到按钮点击事件和输入框的回车键事件上。

以下是推荐实现方案（兼容 jQuery 且语义清晰）：

<div class="input-group mb-3">
  <input type="text" class="form-control" id="chat-input" placeholder="Type your message..."><div class="input-group-append">
    <button id="gpt-button" class="btn btn-primary">Send</button>
  </div>
</div>

// ✅ 将核心提交逻辑提取为可复用函数
function handleSubmit() {
  const input = $('#chat-input').val().trim();
  if (!input) return; // 防止空提交

  // ✅ 此处放置你的实际处理逻辑（如发送 AJAX、更新 UI 等）
  console.log('Sending message:', input);

  // 示例：清空输入框并聚焦（提升体验）
  $('#chat-input').val('').focus();
}

// ✅ 绑定按钮点击事件
$('#gpt-button').on('click', handleSubmit);

// ✅ 绑定输入框回车事件（推荐使用 keydown 而非 keypress，兼容性更好）
$('#chat-input').on('keydown', function(event) {
  if (event.key === 'Enter' || event.keyCode === 13) {
    event.preventDefault(); // 阻止默认换行行为（尤其对 textarea）
    handleSubmit();
  }
});

⚠️ 注意事项：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 不要监听 #gpt-button 的 keyup 或 keypress：按钮本身不接收键盘输入，该事件永远不会触发；
• 优先使用 keydown + event.key === 'Enter'：比 event.which === 13 更现代、语义明确，且兼容所有主流浏览器；
• 务必调用 event.preventDefault()：防止 在表单中意外触发表单默认提交（若父级存在
  ）；
• 若整个结构嵌套在
  标签内，更简洁的方式是直接监听表单的 submit 事件，并移除按钮的 type="submit" 属性（或显式设为 type="button"），但本例中无
  ，故采用上述方式更直接可控。

通过以上改造，用户既可点击“Send”按钮，也可在输入后直接按 Enter，两者执行完全一致的业务逻辑，代码复用、维护性高，符合 Web 无障碍与交互最佳实践。