-1

A readonly number input (<input type="number" readonly/>) can't be changed when a user clicks on the little up&down buttons. However, is there an event or some other trick to listen to events in JS when the user clicks on these buttons?

I understand it's possible to manually create these buttons as standalone elements near the input, but the input will lose its "number" powers

Fogus
  • 366
  • 1
  • 2
  • 13
  • you mean click event for `up&down` button? – Alireza Ahmadi Aug 17 '21 at 07:55
  • @AlirezaAhmadi that's right – Fogus Aug 17 '21 at 08:14
  • Ok you have button to set `readonly` prop to true and false and you want to attach click listener to the button? what is problem? – Alireza Ahmadi Aug 17 '21 at 08:19
  • If the input is `readonly`... Why would you want to know if the users clicks on the buttons to change the value? – Andreas Aug 17 '21 at 08:21
  • Keeping it number would be the easiest way to keep the number validation and have the buttons that increment and decrement a value. I thought if there was a way to track the clicks on these up&down buttons, it would be possible to change the readonly input. – Fogus Aug 17 '21 at 08:23
  • You don't need to use input, just use `div, span p or..` – Alireza Ahmadi Aug 17 '21 at 08:25
  • in this case, I would need to implement increment and decrement logic by myself. As I see it's the only option so I'm developing it. The original idea was impossible – Fogus Aug 17 '21 at 10:40

1 Answers1

0

The field It still listens to clicks - Chrome does not show the buttons when readonly

Why do you even keep it number? If it is readonly?

document.querySelector("[type=number][readonly]").addEventListener("click",() => console.log("clicked the readonly"))
<input type="number" readonly/>

Discussion here

Detecting number input spinner click

mplungjan
  • 169,008
  • 28
  • 173
  • 236