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

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

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

为更好地理解，做类似的事情（显然我知道这段代码是不正确的，只是为了阐明我的意图）：
let inputField = document.getElementById(id); inputField[0].arrowUp.click(); inputField[0].arrowDown.click();

感谢您的关注。

接受的答案

function downFunction(id) {
  let inputField = document.getElementById(id);
  inputField.stepDown()
}

function upFunction(id) {
  let inputField = document.getElementById(id);
  inputField.stepUp();
}

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="+" />

Answer 1

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

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);

以编程方式单击html输入的箭头（类型=“数字”）

3 个答案: