jquery 以编程方式单击HTML输入的箭头(type=“number”)

ht4b089n 于 2023-06-22 发布在 jQuery

关注(0)|答案(4)|浏览(160)

假设我有一个input元素，在我的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="+" />

是否可以使用JavaScript或jQuery分别通过单击upButton和downButton来递增/递减inputFieldId的值？
我并不是说在执行++或--操作后获取字段的当前值并重新设置新值。
我的意思是直接点击箭头按钮。
为了更好地理解，做一些类似于这样的事情：

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

jquery

来源：https://stackoverflow.com/questions/56062658/clicking-programmatically-on-the-arrows-of-html-inputs-type-number

4条答案

按热度按时间

ogsagwnx1#

您可以在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>

赞(0）回复(0）举报 2023-06-22

2mbi3lxu2#

您将无法以编程方式单击input type="number"的箭头，但您不必这样做，因为这不是您实际想要做的。您要做的是与用户单击这些箭头时发生的操作相同的操作。所以，你可以自己启动代码。在这种情况下，只需调整元素的value。

赞(0）回复(0）举报 2023-06-22

stszievb3#

获取向上/向下按钮坐标。

$('#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);

赞(0）回复(0）举报 2023-06-22

o0lyfsai4#

虽然可以使用inputElement.stepUp()更改值，但这本身不会在元素上触发input事件。
因此，如果您的代码具有inputElement.addEventListener('input', () => { // do stuff})，则不会触发它。
但是，在代码中的.stepUp()之后，可以添加

let event = new Event('input', {
    bubbles: true,
    cancelable: true,
});

inputElement.dispatchEvent(event);

然后input事件将在元素上触发，就像用户输入了它一样。
引用：ChatGPT-4教我的！

赞(0）回复(0）举报 2023-06-22

我来回答

jquery 以编程方式单击HTML输入的箭头(type=“number”)

4条答案

相关问题

热门标签

最新问答