如何通过自定义HTML Button模拟按下ENTER键实现自动发消息？

嗨，看起来你已经写好了Enter键发送消息的核心逻辑，要让按钮模拟这个动作其实很简单，这里给你两种实用方案，优先推荐第一种，能直接复用你现有的代码，避免重复造轮子：

方案一：直接调用现有处理函数（推荐） #

既然你已经有了fncTxMessageKeydown这个专门处理Enter键发送的函数，那按钮点击时直接调用它就行，完全不用重新写逻辑。只需要构造一个符合条件的事件对象传进去：

具体步骤： #

• 先拿到你的按钮元素（假设按钮ID是send-btn，你可以换成自己的选择器）
• 给按钮绑定点击事件
• 在点击事件里构造一个模拟的keydown事件，设置keyCode为13（Enter键的编码），并且shiftKey为false（确保不是Shift+Enter换行）
• 调用fncTxMessageKeydown传入这个模拟事件

代码示例：

// 获取按钮元素，替换成你实际的选择器
const sendButton = document.getElementById('send-btn');

// 绑定点击事件
sendButton.addEventListener('click', function() {
  // 构造符合要求的模拟事件
  const mockEnterEvent = {
    keyCode: 13,
    shiftKey: false,
    preventDefault: () => {}, // 空实现，避免报错
    returnValue: true
  };
  
  // 直接调用已有的消息处理函数
  fncTxMessageKeydown(mockEnterEvent);
});

这种方法的好处是100%复用你已经写好的逻辑，包括空消息过滤、未登录时的Socket重连等，完全不用额外写重复代码，维护起来也方便。

方案二：模拟真实键盘事件 #

如果你更想模拟“真实按下Enter键”的行为，可以用KeyboardEvent创建事件并触发输入框的keydown事件：

const sendButton = document.getElementById('send-btn');

sendButton.addEventListener('click', function() {
  // 创建一个真实的keydown事件
  const enterKeyEvent = new KeyboardEvent('keydown', {
    key: 'Enter',
    keyCode: 13,
    shiftKey: false,
    bubbles: true, // 允许事件冒泡
    cancelable: true // 允许阻止默认行为
  });
  
  // 触发输入框的keydown事件，你的现有逻辑会自动执行
  elements.txMessage.dispatchEvent(enterKeyEvent);
});

这种方法需要确保你的输入框elements.txMessage已经绑定了fncTxMessageKeydown事件（从你提供的代码来看已经绑定了），所以触发后会自动执行发送逻辑。

小提示：修复现有代码的小问题 #

看了你提供的fncTxMessageKeydown代码，最后少了一个闭合的花括号，建议先补上，避免运行报错：

var fncTxMessageKeydown = function (e) { 
  e = window.event || e; 
  var keyCode = (e.which) ? e.which : e.keyCode; 
  if (keyCode == 13 && !e.shiftKey) { 
    if (e.preventDefault) { 
      e.preventDefault(); 
    } else { 
      e.returnValue = false; 
    } 
    var message = elements.txMessage.value.toString().trim(); 
    if (message!=""){ 
      if (gotUid==true) { 
        EngtChat.sendMessage(message); 
        elements.txMessage.value = ""; 
      } else{ 
        //show initialization alert and reconnect socket 
        document.getElementsByClassName("engt-sheet-header-with-presence")[0].style.padding="7px"; 
        socket.disconnect(); 
        socket.connect(); 
      } 
    } 
    return false; 
  } 
}; 
if (elements.txMessage != undefined) { 
  elements.txMessage.onkeydown = fncTxMessageKeydown;
} // 补上这里缺失的花括号

补好之后再添加按钮的点击事件，就能正常工作啦！

内容的提问来源于stack exchange，提问作者Santiago Ruffino