HTML中如何通过回车键触发按钮点击事件

你之前把onkeypress绑定在按钮上的方式不对——只有当按钮获取焦点时按回车才会触发这个事件，但用户输入消息时焦点在输入框里，所以这个事件根本没触发到。

下面给你两种可行的解决方案：

方案一：内联事件快速实现 #

直接给输入框添加onkeydown事件，判断按下的是否为回车键，是的话调用sendMessage()：

<div class="inputs">
    <input class="msg-input" type="text" rows="3" placeholder="Message" name="message" id="message" onkeydown="if(event.key === 'Enter') sendMessage()"/>
    <button type="button" name="send" id="send-btn" onClick="sendMessage()">
        Send
    </button>
</div>

方案二：事件监听（推荐） #

如果想让代码结构更清晰，把JS逻辑和HTML分离，用事件监听的方式实现：

// 获取输入框和按钮元素
const messageInput = document.getElementById('message');
const sendBtn = document.getElementById('send-btn');

// 监听输入框的键盘按下事件
messageInput.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        sendMessage();
        // 如果你的输入框是textarea类型，这里可以加上event.preventDefault()阻止默认换行行为
    }
});

// 保留按钮的点击事件
sendBtn.addEventListener('click', sendMessage);

这样不管是点击按钮，还是在输入框按下回车键，都能正常触发sendMessage()函数。

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