Is it possible to disable 'step' in input type number [duplicate]

Question

I would like to know if its possible to override the browser step behaviour or to intercept and change the step value before steping or prevent stepping from happening as a function for input type number.

For example when incrementing using up and down increment/decrement arrows/scroll stepping etc, I would like to manipulate the stepping process before it happens.

eg:

<input type="number" min="1.01" max="1000" id="num"/>

I tried not giving a step attribute. This did not work.

Step attribute only takes values 'all' and numbers, it does not take false.

So I cannot disable it using any attributes. I also tried over riding the stepUp, stepDown functions but that does not get called when the browser step function is happening.

I basically want it either to not step at all or if it does step, then do a custom step function, in which I decide the step value based on its current value.

I tried modifying on change, but this does not seem to work for the current step, only for the next step.

Here is the javascript:

$("#num").on("keyup change focusin focusout", function (e) {
    $(this).attr("step", getStep($(this).val()));
});

function getStep (val) {
    val = parseFloat(val);
    var step = 1;
    if (val < 5) {
        console.log('here');
        step = 2;
    }  else if (val < 10) {
        step = 5;
    }
    return step;
}

http://jsfiddle.net/urrLmm4L/

Here if I enter 5 it should increment by 5, but it increments by 1. Next time it increments by 5. I want to override the step value before stepping if possible.

I am not trying to solve this by using a text input, I am trying to identify whether there is a means to override the stepping function.

Answer 1

Not sure if this is what you're looking for but I'll give it a try.

WebKit desktop browsers add little up down arrows to number inputs called spinners. You can turn them off visually like this:

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

Source: https://css-tricks.com/snippets/css/turn-off-number-input-spinners/

EDIT

Solved it! Here is the fiddle

http://jsfiddle.net/649d66bb/

  $(document).ready(function() {
    $("input[type=number]").on("focus", function() {
        $(this).on("keydown", function(event) {
            if (event.keyCode === 38 || event.keyCode === 40) {
                event.preventDefault();
            }
        });
    });

});