How to recognize the click on a spinner button in an input with type number?

user_11952743 0
Viewed 166

I'm trying with this code:

$("input[type=number]::-webkit-inner-spin-button").click( function() {
    setTimeout(function(){
       $(this).attr('disabled', true); 
    }, 3000);
});

But without success. I need to set a delay between the clicks.

jquery
1 Answers

You can't select pseudo elements like ::-webkit-inner-spin-button with JavaScript or jQuery because they aren't part of the DOM. But you could instead listen on the change event of the input.

Furthermore $(this) doesn't work in the inner function of setTimeout(). Therefor you have to store it in a variable (that is in the scope of that function).

And last: If you want to set a delay between the clicks you have to change the disabled attribute immediately. The function in the setTimeout is executed after the delay and should be used to set disabled to false, so that you can click again on the spin buttons.

Working example:

$('input[type=number]').on('change', function() {
  let input = $(this);
  input.attr('disabled', true);
  setTimeout(function() {
    input.attr('disabled', false);
  }, 3000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">

user_153773550
Related