以编程方式单击 html 输入的箭头 (type="number")

Question

假设我的 html 代码中有一个输入元素，类型为 number 和两个按钮：

function downFunction(id) {
  let inputField = document.getElementById(id);
  // How to increment the value?
  log("Log from downFunction", inputField)
}

function upFunction(id) {
  let inputField = document.getElementById(id);
  // How to decrement the value?
  log("Log from upFunction", inputField)
}

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

<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="+" />

是否可以通过单击upButton 和downButton 分别使用javascript 或最终使用jQuery 来增加/减少inputFieldId 的值？

我的意思不是在执行++ 或-- 操作后获取字段的当前值并重新设置新值。
我的意思是直接点击箭头按钮。

为了更好地理解，做一些类似的事情：

let inputField = document.getElementById(id);  
inputField[0].arrowUp.click();  
inputField[0].arrowDown.click();

Answer 1

您可以在input[type=number] HTMLElement 上使用stepUp 和stepDown 方法

stepUp Documentation stepDown Documentation

function stepUp() {
  document.getElementById('input').stepUp();
}

function stepDown() {
  document.getElementById('input').stepDown();
}

<input id=input type=number min=1 max=10>
<button onclick="stepUp()">+</button>
<button onclick="stepDown()">-</button>

Answer 2

您将无法以编程方式单击 input type="number" 的箭头，但您不必这样做，因为这不是您真正想要做的。如果用户单击了这些箭头，您想要做的是相同的操作。因此，您可以自己启动该代码。在这种情况下，只需调整元素的value即可。

Answer 3

获取上/下按钮坐标。

$('#upButton').click(function (e){
    var elm = $(this);
    var xPos = e.pageX - elm.offset().left;
    var yPos = e.pageY - elm.offset().top;
​
    console.log(xPos, yPos);
});

点击这些坐标。

var event = $.Event('click');
event.clientX = 12.796875;
event.clientY = 9;
$('.upButton').trigger(event);