如何通过JavaScript/jQuery模拟点击number输入框箭头实现值增减？

当然可以实现！不过要注意：原生的type="number"输入框并没有暴露可直接点击的箭头DOM元素，但我们可以利用它内置的原生API来模拟点击箭头的行为——也就是stepUp()和stepDown()方法，这两个方法会完全复刻浏览器点击上下箭头的逻辑，自动遵守你设置的min、max和step规则，完全符合你的需求。

修改后的代码实现 #

JavaScript部分 #

function downFunction(id) {
  let inputField = document.getElementById(id);
  // 模拟点击下箭头，自动减少步长（默认1）
  inputField.stepDown();
  log("Log from downFunction", inputField);
}

function upFunction(id) {
  let inputField = document.getElementById(id);
  // 模拟点击上箭头，自动增加步长（默认1）
  inputField.stepUp();
  log("Log from upFunction", inputField);
}

function log(message, element) {
  console.log(message);
  console.log(element);
  console.log("\n");
}

HTML部分 #

<input type="number" id="inputFieldId" min="1" max="10" value="10">
<input type="button" id="downButton" onclick="downFunction('inputFieldId')" value="-">
<input type="button" id="upButton" onclick="upFunction('inputFieldId')" value="+" />

关键方法说明 #

• stepUp([amount])：调用这个方法就相当于用户点击了number输入框的上箭头，默认每次增加1，你也可以传入自定义数值（比如inputField.stepUp(2)每次增加2）
• stepDown([amount])：对应下箭头的行为，默认每次减少1，同样支持传入自定义步长

这个方案的优势在于：

• 完全模拟浏览器原生行为，不用手动计算值再赋值
• 自动遵守min、max的限制（比如当值已经是1时，调用stepDown()不会让值低于1）
• 不需要依赖jQuery，纯原生JS实现

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