javascript - Clicking programmatically on the arrows of html inputs (type="number") - Stack Overflow

admin管理员组

文章数量:1287890

Supposing i have an input element, in my html code, of type number and two buttons:

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

Supposing i have an input element, in my html code, of type number and two buttons:

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

Is possible to increment/decrement the value of inputFieldId using javascript, or eventually jQuery, respectively by clicking on upButton and downButton?

I don't mean getting the current value of the field and re-setting the new value after doing ++ or -- operations.
I mean by clicking directly on the arrows buttons.

To better understand, doing something of similar to this:

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

• javascript
• jquery
• html

Share Improve this question Follow edited Jul 27, 2020 at 22:38 Roberto Manfreda asked May 9, 2019 at 15:18 Roberto ManfredaRoberto Manfreda 2,62333 gold badges2828 silver badges4545 bronze badges 4

• That is probably impossible. – SLaks Commented May 9, 2019 at 15:19
• 1 Just get a reference to the input and set the value. No clicking required. – The Head Rush Commented May 9, 2019 at 15:20
• Yes, i know that's the right way but i was curious to know it was possible clicking on the arrows :) – Roberto Manfreda Commented May 9, 2019 at 15:22
• But why do you want so? – Shridhar Sharma Commented May 9, 2019 at 15:24

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 11

You can use stepUp and stepDown methods on input[type=number] HTMLElement

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>

While you can use inputElement.stepUp() to change the value, that by itself won't fire an input event on the element.

So, if your code has inputElement.addEventListener('input', () => { // do stuff}), it will not be triggered.

However, after .stepUp() in your code, you can add

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

inputElement.dispatchEvent(event);

Then the input event will fire on the element, as though a user entered it.

Citation: ChatGPT-4 taught me that!

You won't be able to programmatically click the arrows of an input type="number", but you don't have to because that's not what you actually want to do. What you want to do is the same action that would have happened if the user had clicked those arrows. So, you can just initiate that code yourself. In this case, just adjust the value of the element.

Get the up/down button coordinates.

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

Click at those coordinates.

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

本文标签： javascriptClicking programmatically on the arrows of html inputs (typequotnumberquot)Stack Overflow