如何实现按下Enter键触发HTML按钮，完成聊天消息发送？

你的问题主要有两个原因：一是原代码把点击事件绑定放在了keyup回调里，每次输入都会重复绑定事件；二是你尝试的jQuery方法可能未引入jQuery库，或者不适配动态创建的元素。下面直接给你适配原生JS的修改方案：

核心修改思路 #

1. 把发送消息的逻辑抽成独立函数，避免重复绑定事件
2. 给输入框添加keydown事件监听Enter键
3. 调整按钮状态的控制逻辑，只在输入内容变化时更新按钮禁用/启用状态

修改后的完整代码 #

var chat_input_send = document.createElement('button');
chat_input_send.setAttribute('id', 'chat_input_send');
chat_input_send.setAttribute('disabled', true);
chat_input_send.innerHTML = `<i class="far fa-paper-plane"></i>`;

// 单独定义发送消息的核心函数
function sendChatMessage() {
  // 过滤空内容（包含仅输入空格的情况）
  if (chat_input.value.trim().length <= 0) return;
  
  chat_input_send.setAttribute('disabled', true);
  chat_input_send.classList.remove('enabled');
  
  parent.create_load('chat_content_container');
  parent.send_message(chat_input.value);
  
  chat_input.value = '';
  chat_input.focus();
}

// 给发送按钮绑定点击事件（仅绑定一次）
chat_input_send.onclick = sendChatMessage;

var chat_input = document.createElement('input');
chat_input.setAttribute('id', 'chat_input');
chat_input.setAttribute('maxlength', 1000);
chat_input.placeholder = `${parent.get_name()}. Say something...`;

// 监听输入框按键，触发Enter发送
chat_input.onkeydown = function(e) {
  // 匹配Enter键的keyCode
  if (e.keyCode === 13 || e.which === 13) {
    e.preventDefault(); // 阻止默认行为（避免页面刷新或输入框无效换行）
    sendChatMessage();
  }
};

// 仅负责控制发送按钮的禁用/启用状态
chat_input.onkeyup = function() {
  if (chat_input.value.trim().length > 0) {
    chat_input_send.removeAttribute('disabled');
    chat_input_send.classList.add('enabled');
  } else {
    chat_input_send.setAttribute('disabled', true);
    chat_input_send.classList.remove('enabled');
  }
};

关键修改说明 #

• 抽离发送逻辑为独立函数，避免原代码中每次输入都重复绑定点击事件的问题
• 使用onkeydown监听按键，比keypress兼容性更好，能稳定捕获Enter键
• 加入trim()过滤空内容，防止用户仅输入空格就触发发送
• 添加e.preventDefault()，避免Enter键触发页面刷新等默认行为

内容的提问来源于stack exchange，提问作者Mahdi Azimi