表单按回车键时页面刷新，现有解决方案无效求助

先梳理下你代码里的几个核心问题，这些问题会导致表单提交逻辑异常、消息发送失效：

1. 表单onsubmit写法错误 #

你直接写了onsubmit="preventDefault();"，但preventDefault()是事件对象的专属方法，不能脱离事件上下文直接调用。正确的内联写法需要传递事件参数，比如onsubmit="event.preventDefault();"，不过更推荐用JS绑定事件的方式，避免内联代码的混乱。

2. jQuery选择器语法错误 #

$("frm1")是无效的ID选择器，jQuery中选择元素ID必须加#前缀，正确写法是$("#frm1")。

3. 回车提交表单的拦截漏洞 #

你的按钮是type="button"，不会主动触发表单提交，但用户在输入框按回车时，浏览器会默认触发表单提交行为，这时候如果没正确拦截，页面会刷新，消息发送逻辑也会中断。

修复后的完整代码 #

<form id="frm1">
  Message: <input type="text" name="message"><br>
  <input type="button" onclick="sendMessage()">
</form>

<script>
function sendMessage() {
  var message = document.getElementById("frm1").message.value;
  socket.emit('browsermsg', {data: message});
}

// 正确绑定表单submit事件，阻止默认提交并调用发送函数
$("#frm1").submit(function(e) {
  e.preventDefault(); // 阻止表单默认刷新行为
  sendMessage(); // 执行消息发送逻辑
});
</script>

额外优化建议 #

尽量避免内联事件（比如onclick、onsubmit），用JS绑定事件能让代码结构更清晰、易维护：

<form id="frm1">
  Message: <input type="text" name="message" id="messageInput"><br>
  <input type="button" id="sendBtn" value="Send">
</form>

<script>
// 确保已引入jQuery库
// 绑定按钮点击事件
$("#sendBtn").click(sendMessage);
// 绑定表单回车提交事件
$("#frm1").submit(function(e) {
  e.preventDefault();
  sendMessage();
});

function sendMessage() {
  var message = $("#messageInput").val(); // 用jQuery简化取值操作
  socket.emit('browsermsg', {data: message});
}
</script>

这样不管是点击按钮还是按回车，都能稳定触发消息发送，同时彻底阻止表单的默认刷新行为。

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