Geek Answers Handbook

Is it possible to disable the "step" in the input type number

I would like to know if it is possible to override the behavior of the browser step or intercept and change the value of the step before step-by-step execution or to prevent the transition from the function as input type number.

For example, when incrementing using the up / down / down / scroll stepping arrows, etc. I would like to manipulate the step process before this happens.

eg:

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

I tried not to specify the step attribute. This did not work.

The Step attribute accepts only all and numbers; it does not accept false.

Therefore, I cannot disable it using any attributes. I also tried switching to stepUp, stepDown functions, but this is not called when the browser step function occurs.

Basically, I want it to not take any steps or take a step, and then perform a custom step function in which I determine the value of the step based on its current value.

I tried to change the changes, but this does not look like 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 increase by 5, but it will increase by 1. Next time it will increase by 5. I want to redefine the value of the step before taking the step, if possible.

I am not trying to solve this problem with text input, I am trying to determine if there is a way to override the step function.

+5
source share
1 answer

Not sure if this is what you are looking for, but I will try.

WebKit desktop browsers add small down arrows to the number of inputs called spinners. You can disable them visually as follows:

 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

I decided! 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(); } }); }); });
+4
source

More articles:


All Articles