如何在输入框输入时按下空格键清空输入内容？

你的代码目前存在两个核心问题：

• 全局绑定keyup事件，无法精准针对输入框聚焦状态，且keyup会在空格字符插入输入框后才触发，导致先出现空格再清空的问题
• 使用setAttribute("value", "")不是修改输入框内容的正确方式，输入框的实时值应该通过value属性直接操作

以下是修正后的代码：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" class="abc">
  <script>
      // 获取输入框元素
      const input = document.querySelector(".abc");
      // 给输入框绑定keydown事件
      input.addEventListener("keydown", event => {
        // 判断按下的是空格键
        if(event.code === "Space") {
          // 阻止空格的默认输入行为
          event.preventDefault();
          // 直接清空输入框内容
          input.value = "";
        }
      });
  </script>
</body>
</html>

关键修改说明 #

• 把事件绑定从全局document改为输入框自身，确保只有当输入框聚焦（处于输入状态）时才响应空格事件
• 使用keydown事件替代keyup，在空格字符插入输入框前就触发操作，配合event.preventDefault()避免空格被输入
• 直接操作输入框的value属性清空内容，这是操作表单输入框值的标准方式

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