点击按钮时回车键失效求助（HTML/CSS/JS实时对话实现）

我看了你的代码，问题主要出在键盘事件监听的绑定时机不对，还有一些小细节可以优化。咱们一步步来修复：

问题分析 #

你把enterkey()函数放在了typo()里面，这意味着只有当你点击「Send」按钮后，才会给输入框绑定键盘事件监听。但你想要的是页面加载完成后，输入框就支持回车键发送，而且重复点击按钮会多次绑定同一个事件，可能导致奇怪的重复触发问题。另外，keyCode已经是被废弃的API，现在更推荐使用event.key来判断按键，兼容性和可读性更好。

修复后的代码 #

<p id="demo"></p>
<input type="text" id="myText" value="">
<button onclick="typo()" class="btn btn-warning btn-sm" id="btn-chat">Send</button>

<script>
  // 页面加载完成后立刻绑定键盘事件
  document.addEventListener('DOMContentLoaded', function() {
    var input = document.getElementById("myText");
    input.addEventListener("keyup", function(event) {
      // 判断是否按下回车键
      if (event.key === 'Enter') {
        // 触发发送按钮的点击事件
        document.getElementById("btn-chat").click();
      }
    });
  });

  function typo(){
    var currentText = document.getElementById("demo").innerHTML;
    var inputValue = document.getElementById("myText").value.trim();
    
    // 避免发送空消息
    if (!inputValue) return;
    
    var x = '<p class=chatbox>' + inputValue + '</p>';
    document.getElementById("myText").value = "";
    document.getElementById("demo").innerHTML = currentText + x;
  }
</script>

关键修改点 #

• 提前绑定事件：用DOMContentLoaded事件确保页面元素加载完成后，立刻给输入框绑定键盘监听，不用等点击按钮才激活回车键功能。
• 替换keyCode为event.key：keyCode已被Web标准废弃，event.key更直观（直接写'Enter'），且兼容所有现代浏览器。
• 增加空内容判断：避免用户不小心按回车发送空消息，提升交互体验。
• 移除不必要的event.preventDefault()：在keyup事件里阻止默认行为没有意义，反而可能影响输入框的正常换行等操作（虽然这里是单行输入，但保留默认行为更稳妥）。

这样修改后，你打开页面就能直接按回车键发送消息，点击按钮的原有功能也完全不受影响。

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