如何制作按下回车键即清空内容的HTML文本框？

直接上可运行的代码，满足你要的需求：按下回车清空内容，不刷新页面也不提交数据。

完整代码示例 #

<!DOCTYPE html>
<html>
<body>
  <input type="text" id="clearInput" placeholder="输入内容后按回车试试">

  <script>
    // 获取文本框元素
    const inputBox = document.getElementById('clearInput');
    
    // 监听键盘按下事件
    inputBox.addEventListener('keydown', function(e) {
      // 检测是否按下回车键
      if (e.key === 'Enter' || e.keyCode === 13) {
        // 阻止默认行为（避免表单提交、页面刷新）
        e.preventDefault();
        // 清空输入框内容
        this.value = '';
      }
    });
  </script>
</body>
</html>

关键细节说明 #

• 给文本框设置id是为了方便JS获取元素，你可以改成自己喜欢的名称
• e.preventDefault()是核心：如果文本框在表单里，回车默认会触发表单提交，加这行就能彻底阻止页面刷新和数据提交
• 同时判断e.key和e.keyCode是为了兼容所有浏览器，不管新老版本都能正常识别回车键

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