Stop the user being able to hold down the input number spinner

Id like to only allow the user to click the number increment button, rather than being able to hold and it spins continually. Id like to make it generic for all input number fields, we have a class on each one which I can target which is .number-input

Ive got these set up, so wondered if I can either add it to these functions, or better still I suppose I call a function from these functions.

$(document).on('input', '.number-input', function () {

});

$(document).on('blur change', '.number-input', function () {

});

Hi @multichild, I suppose you might lock the current value after the first input event (for instance by setting a data attribute), and unlock it again after the next blur / mouseup / keyup / touchend event… e.g.

However I would strongly advise against messing with the native input default behaviour; if at all, better write a custom component using 2 buttons or something so that the user doesn’t think their browser is broken (or your page for that matter).

1 Like