HTML Input Box custom step buttons

Question

Hope someone can point me in the right direction with this.

I have a simple input box:

<form>
<input id="Days" name="Days" type="number" required step="0.025" min="0.000" max="5" value="1.000">
<input type="submit" id="Sub"/>
</form>

Which works OK but the users have requested:

• Only allow input in multiples of 0.025
• The up and down arrows move in multiples of 1

So it is perfectly acceptable to type in 1.025 but click on the up arrow in the box gives 1 then 2 etc.

I can configure it to meet either requirement but not both at the same time. Is there a way to override the behavior of the arrows achieve this?

Update

The solution provided by frajk below works well but when you click on submit then you get the message:

Anyway round that ?

Answer 1

Assuming you have jQuery available, I think this does what you're looking for

<input id="Days" name="Days" type="number" required step="1.000" min="0.000" max="5" value="1.000">

$("#Days").change(function(e) {
    var $ele = $(e.target);
    $ele.val( (Math.ceil($ele.val()*40)/40).toFixed(3) );
});

Answer 2

Your code works fine as you want in chrome and firefox. Arrow up click make value change to 1.025.