输入类型编号的属性“min”工作错误

Question

I have an input type number with atrributes min,max,step;

In documentation https://developer.mozilla.org/ru/docs/Web/HTML/Element/Input/number says

The minimum value to accept for this input. If the value of the element is less than this, the element fails constraint validation. If a value is specified for min that isn't a valid number, the input has no minimum value.

This value must be less than or equal to the value of the max attribute.

But in real seems like the min attribute also change basic value of my input,in total that increment value by user input wrong.

You can try this:

Works fine(with no min attribute): https://jsfiddle.net/utqLrveh/7/

Works wrong(with min attribute): https://jsfiddle.net/utqLrveh/6/

Javascript part

var e=document.getElementById('basic');
e.setAttribute('value',16);
e.step=32;
e.max=59;

HTML part(works wrong with min attribute)

<input id="basic" type="number" value="0" min="5">

(works fine with no min attribute)

<input id="basic" type="number" value="0">

With no min the first user increment return 48(value=16+step=32); With min the first user increment return 37( ̶v̶a̶l̶u̶e̶=̶1̶6̶ min=5+step=32);

Answer 1

The reason for this behaviour (in my understanding) is that once you set the min value (eg 5 ), the future values (that will be obtained after the <input> was incremented/decremented) would be based on it regardless of the default value .

In other words, if you set the value to say 16 and that the range is [5, 59] with a step of 32, the <input> can only get values such that any values val that you can obtain in the <input> field, you'll have this: val = input.min + n * input.step where n is the number of increments from the input.min (ie the minimum it can take).

So in your case, you'll end up with having a range of values as follows [5, 37] (since 69 = 5 + 3 * 32 is above 59 and so are any 5 + 32 * n where n >= 3 ).