JS入门者求助：限制输入为数字并将空值替换为0

一、强制输入框仅能输入数字 #

提供两种实用方案，可根据需求选择：

方案1：使用HTML5 number 类型（简单直接） #

将输入框的type改为number，搭配inputmode="numeric"优化移动端输入体验：

<input type="number" id="user-input" onfocus="this.value = ''" inputmode="numeric">
<button id="submit" onclick="addTo()">Submit</button>
<p class="demo"></p>

若不需要number类型自带的上下箭头，可通过CSS隐藏：

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

方案2：JavaScript实时过滤非数字（灵活性更高） #

如果不想用number类型，给输入框添加input事件，实时过滤非数字字符：

<input type="text" id="user-input" onfocus="this.value = ''" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
<button id="submit" onclick="addTo()">Submit</button>
<p class="demo"></p>

正则/[^0-9]/g会把所有非数字字符替换为空，确保输入框仅保留数字内容。

二、处理空输入为"0" #

原JavaScript代码存在数组属性误用、运算符错误的问题，修改后的代码如下：

const myArr = []; 

function addTo() { 
  // 获取输入值并去除首尾空格
  const inputVal = document.getElementById("user-input").value.trim();
  // 空值替换为"0"，非空则保留原输入
  const valueToAdd = inputVal === "" ? "0" : inputVal;
  // 将处理后的值加入数组
  myArr.push(valueToAdd);
  // 更新页面展示
  document.querySelector(".demo").innerHTML = myArr.join("<br />");
  // 清空输入框，优化连续输入体验
  document.getElementById("user-input").value = "";
}

关键修改说明： #

• 用trim()过滤输入值首尾的空格，避免空格被误判为有效输入
• 用三元运算符简洁处理空值替换逻辑
• 添加输入框清空操作，提升用户体验

完整可运行代码 #

将两部分结合，完整代码示例：

<!DOCTYPE html>
<html>
<body>
  <input type="number" id="user-input" onfocus="this.value = ''" inputmode="numeric">
  <button id="submit" onclick="addTo()">Submit</button>
  <p class="demo"></p>

  <script>
    const myArr = []; 

    function addTo() { 
      const inputVal = document.getElementById("user-input").value.trim();
      const valueToAdd = inputVal === "" ? "0" : inputVal;
      myArr.push(valueToAdd);
      document.querySelector(".demo").innerHTML = myArr.join("<br />");
      document.getElementById("user-input").value = "";
    } 
  </script>

  <style>
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
    }
  </style>
</body>
</html>

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