Detect when HTML number input stepper arrows clicked

Question

Is it possible to detect when the stepper arrows are clicked in an HTML number input? My inputs are arbitrary size decimals, so I have an attribute step=0.00000001 to have a valid <input type=number>. However, the stepper arrows should increase/decrease by 0.01. So if a function can be called when those arrows are clicked, I can programmatically increase/decrease the input.

I don't think this is possible, at least for now. However, you can manage this using the `input` event. Here's an [example](https://stackoverflow.com/a/49567045/3689977). — Alexis88, Jun 23 '23 at 05:18
Thank you for that link @Alexis88. I don't think that specific answer is relevant, but the next answer could be. If I could compare the previous value and the value right after a mouseclick, then I would know if a stepper arrow was clicked as opposed to a manual entry. — at., Jun 23 '23 at 05:36
Oh, I got it. In that case, you can use a `data-attribute` or a global variable. Basically you need to set an initial value and when the `input` event occurs, just compare the new input value to the stored one. — Alexis88, Jun 23 '23 at 05:48
@Alexis88 does the `input` event occur immediately after a mouse click? If a person manually sets the value to whatever the stepper arrow would normally set it to, then I want to leave it. Otherwise, if it was the stepper arrow, I want to increase the step by a lot. — at., Jun 23 '23 at 05:50
It does. The `input` event fires when an ``, `` or `<select>` value has been changed. When you click on the `<input type="number"/>` arrows, you automatically change the element's value. That's why the `input` event fires just after that. Here's more information about [input event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).</select> — Alexis88, Jun 23 '23 at 05:57

B-Brazier · Answer 1 · 2023-06-23T06:04:42.477

0

You just need to use the onChange function:

<input type="number" step="0.00000001" onChange="alert('change')" />

Edit:

I think for your specific example you would need to use a combination of onChange, onmousedown and onkeydown.

Your input html would look like:

<input id="in" type="number" step="0.00000001" onmousedown="downValue(this.value)" onkeydown="resetValue()" onChange="changeValue(this.value)" />

And you would need to use some javascript to store and check the change of the values like so:

var storedValue = "";

function downValue(e) {
    storedValue = e;
}

function changeValue(e) {
  if (storedValue !== "" && storedValue !== e) {
     console.log("Do Something");
  }
}

function resetValue() {
  storedValue = "";
}

edited Jun 23 '23 at 06:04

answered Jun 23 '23 at 05:09

B-Brazier

96
6

How does that tell me when the stepper arrows were clicked? The `change` event also occurs if the user types in a new value. Is there a way to distinguish between the two? Maybe the `event` object passed to the listening function tells us? – at. Jun 23 '23 at 05:14
I'm not sure if you're trying to avoid manual input. If so you can add `onkeydown="return false"` aswell to avoid manual input. Or you could replace 'return false' to detect manual input. It's somewhat the opposite of what you're after but could be used in the same sense. Theres also onmousedown but it would also detect any click unfortunately. – B-Brazier Jun 23 '23 at 05:24
I want both manual input and stepper arrow functionality, but if the stepper arrows are clicked, I want the step size to be much bigger than what the `step` attribute dictates. – at. Jun 23 '23 at 05:34
I've edited my answer as I think it may solve your issue using a combination of onChange, onmousedown and onkeydown – B-Brazier Jun 23 '23 at 06:05

score 0 · Answer 2 · answered Jun 23 '23 at 05:57

0

Do you mean like this?

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

const inputElement = document.querySelector('input[name="my-number"]');
const result = document.querySelector(".result");

inputElement.addEventListener("change", (event) => {
  result.textContent = `Your number ${event.target.value}`;
});

<input type="number" step="0.01" name="my-number">

<div class="result"></div>

answered Jun 23 '23 at 05:57

Sugeng Sulistiyawan

11
1

No. I wouldn't be able to differentiate between manually setting the number versus clicking on the stepper arrows. – at. Jun 23 '23 at 17:21
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 25 '23 at 01:34

score 0 · Answer 3 · answered Jun 23 '23 at 06:12

As a complement for my comments:

const input = document.querySelector("[type=number]");
let temp = input.value;
      
input.addEventListener("input", _ => {
    if (input.value > temp){
        console.log("The new value is greater than the old one");   
    }
    else if (input.value < temp){
        console.log("The new value is lesser than the old one");
    }
    else{
        console.log("The value stays the same");
    }
    
    temp = input.value;
}, false);

<input type="number" />

Detect when HTML number input stepper arrows clicked

3 Answers3