本文详解如何让文本输入框在用户按下回车键（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();
}
});⚠️ 注意事项：
- 不要监听 #gpt-button 的 keyup 或 keypress：按钮本身不接收键盘输入，该事件永远不会触发；
- 优先使用 keydown + event.key === 'Enter'：比 event.which === 13 更现代、语义明确，且兼容所有主流浏览器；
- 务必调用 event.preventDefault()：防止 在表单中意外触发表单默认提交（若父级存在
- 若整个结构嵌套在
通过以上改造，用户既可点击“Send”按钮，也可在输入后直接按 Enter，两者执行完全一致的业务逻辑，代码复用、维护性高，符合 Web 无障碍与交互最佳实践。
