实现number类型输入框达到最大/最小值时将增减箭头显示为禁用状态

当然可以实现这个需求！原生的<input type="number">并不会自动根据当前值切换箭头的禁用状态样式，但我们可以通过JavaScript监听输入变化结合CSS自定义箭头样式来达成效果。下面是针对你的示例的完整实现方案：

1. HTML结构 #

先保留你提供的基础输入框，默认设置初始值为1，方便直接看到初始状态的禁用样式：

<input type="number" id="quantity" name="quantity" min="1" max="5" value="1">

2. CSS样式 #

不同浏览器对number输入框的箭头伪元素定义不同，我们兼顾webkit内核（Chrome、Edge、Safari）和Firefox两种情况：

/* Webkit内核浏览器：基础箭头样式 */
#quantity::-webkit-inner-spin-button {
  opacity: 1;
  cursor: pointer;
  transition: opacity 0.2s;
}

/* 达到最小值时，禁用减号箭头 */
#quantity.min-reached::-webkit-inner-spin-button:nth-child(2) {
  opacity: 0.3;
  cursor: not-allowed;
}

/* 达到最大值时，禁用加号箭头 */
#quantity.max-reached::-webkit-inner-spin-button:nth-child(1) {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Firefox浏览器：基础箭头样式 */
#quantity::-moz-number-spin-down,
#quantity::-moz-number-spin-up {
  opacity: 1;
  cursor: pointer;
  transition: opacity 0.2s;
}

#quantity.min-reached::-moz-number-spin-down {
  opacity: 0.3;
  cursor: not-allowed;
}

#quantity.max-reached::-moz-number-spin-up {
  opacity: 0.3;
  cursor: not-allowed;
}

这里通过透明度变化和鼠标样式提示用户箭头的禁用状态，你也可以根据需求调整为直接隐藏箭头。

3. JavaScript逻辑 #

监听输入框的input和change事件，实时判断当前值与min、max的关系，动态添加/移除样式类：

const quantityInput = document.getElementById('quantity');
const minVal = parseInt(quantityInput.min);
const maxVal = parseInt(quantityInput.max);

function updateArrowState() {
  let currentVal = parseInt(quantityInput.value);
  
  // 兜底处理：修正非数字或超出范围的输入值
  if (isNaN(currentVal) || currentVal < minVal) {
    quantityInput.value = minVal;
  } else if (currentVal > maxVal) {
    quantityInput.value = maxVal;
  }
  
  // 切换样式类
  quantityInput.classList.toggle('min-reached', quantityInput.value === minVal);
  quantityInput.classList.toggle('max-reached', quantityInput.value === maxVal);
}

// 页面加载时初始化状态
updateArrowState();

// 监听输入和值变化事件
quantityInput.addEventListener('input', updateArrowState);
quantityInput.addEventListener('change', updateArrowState);

这段代码会在页面加载时初始化箭头状态，并且每当用户输入或通过箭头调整值时，自动判断当前值是否达到边界，切换对应的禁用样式。

额外说明 #

如果想让箭头真正不可点击（而非仅样式提示），可以在达到边界时阻止箭头的点击事件，但不同浏览器的实现差异较大，通常仅样式提示就足以满足大多数交互需求。

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