页面加载时如何限制购物车商品数量输入值至15

1. 优化数量限制函数 #

先把你现有的limiter函数调整得更健壮，同时处理空值、非数字的异常情况：

function limiter(input) {
  // 把输入值转为整数，空值或无效数字默认设为1
  const value = parseInt(input.value, 10);
  if (isNaN(value) || value < 1) {
    input.value = 1;
  } else if (value > 15) {
    input.value = 15;
  }
}

2. 页面加载时自动修正数量 #

通过DOMContentLoaded事件，在页面DOM完全加载后，找到目标输入框并执行限制逻辑：

// 页面加载完成后触发检查
document.addEventListener('DOMContentLoaded', function() {
  // 替换成你需要限制的输入框ID
  const targetInput = document.getElementById('target-quantity-input');
  if (targetInput) {
    limiter(targetInput);
  }
});

3. 保留原有交互限制 #

继续在输入框的onchange事件绑定limiter，确保用户手动调整数量时依然生效：

<input type="number" id="target-quantity-input" max="15" onchange="limiter(this)">

扩展：批量处理多个输入框 #

如果需要限制多个特定商品的数量，可以给这些输入框统一加一个类名（比如cart-quantity-limiter），然后批量处理：

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有带指定类名的输入框
  const quantityInputs = document.querySelectorAll('.cart-quantity-limiter');
  quantityInputs.forEach(input => limiter(input));
});

对应的HTML结构：

<input type="number" class="cart-quantity-limiter" max="15" onchange="limiter(this)">
<input type="number" class="cart-quantity-limiter" max="15" onchange="limiter(this)">

这样不管是用户多次添加商品导致购物车数量超过15，还是手动修改输入框，都能确保数量被限制在1-15的范围内。

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