How to trigger button press from ENTER Key in HTML

Question

我正在制作一个聊天室应用程序，并希望用户能够键入消息并在发送消息时按回车键。目前它只在我用鼠标按下“发送”按钮时发送。当他们按下回车键时，我如何获得要发送的消息？我基本上想在他们用鼠标单击按钮时触发 sendMessage() ，或者他们只是按回车键。

我尝试使用 onkeypress 但它不起作用

<div class="inputs">
        <input class="msg-input" type="text" rows="3" placeholder="Message" name="message" id="message"/>
        <button type = "button" name="send" id="send-btn" onkeypress="sendMessage()" onClick="sendMessage()">
            Send
        </button>
    </div>`

Answer 1

检查此链接： https://codepen.io/wmizxqve/pen/RwYByxM 我在那里添加了所有东西。

我认为你应该使用 Javascript：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <div class="inputs">
            <input class="msg-input" type="text" rows="3" placeholder="Message" name="message" id="message"/>
            <button type = "button" name="send" id="send-btn" onkeypress="sendMessage()" onClick="sendMessage()">
                Send
            </button>
        </div>

和javascript

$(document).ready(function() {

  $('.msg-input').keydown(function(event) {
    // enter has keyCode = 13, change it if you want to use another button
    if (event.keyCode == 13) {
      sendMessage() //call sendMessage Function;
    }
  });

});

Answer 2

要从 HTML 中的 ENTER 键触发按钮按下，您可以使用 JavaScript 侦听输入字段上的“keydown”事件并检查“Enter”键是否被按下。如果是这样，您可以使用 click() 方法以编程方式单击按钮。

代码如下：

<div class="inputs">
  <input class="msg-input" type="text" rows="3" placeholder="Message" name="message" id="message" onkeydown="handleKeyDown(event)" />
  <button type="button" name="send" id="send-btn" onclick="sendMessage()">Send</button>
</div>

<script>
  function handleKeyDown(event) {
    if (event.key === "Enter") {
      event.preventDefault(); // prevent default behavior of Enter key
      sendMessage();
    }
  }

  function sendMessage() {
    const messageInput = document.getElementById("message");
    const message = messageInput.value.trim();
    if (message !== "") {
      // Send the message to the server
      console.log("Sending message:", message);
      messageInput.value = ""; // clear the input field
    }
  }
</script>

这里是解释：

本例中使用onkeydown 事件将handleKeyDown 函数添加到输入字段。此函数检查是否按下了 Enter 键并调用 sendMessage 函数。

sendMessage 函数获取消息输入字段的值，修剪任何前导或尾随空格，并将消息发送到服务器（在本例中，它只是将消息记录到控制台）。最后，它通过将其值设置为空字符串来清除输入字段。

注意，我还添加了 event.preventDefault() 来防止 Enter 键的默认行为，即提交表单。