在HTML5数字输入中验证0.5作为步长值

Question

I want to have an input field which only allows to type whole numbers or .5 decimal numbers. eg 0, 0.5, 1, 1.5, 2, 2.5.......etc etc

I am trying to do this with a HTML5 input field as so

<input type="number" min="0" max="18" step="0.5" pattern="\\d+" />

but it won't validate the number when it is on a half step of 0.5. It just stays red when clicking outside / validating.

Is this possible? I can't find similar example of how to validate for half steps. DO I need to use jQuery to achieve this?

Thanks

Fiddle Demo http://jsfiddle.net/b8NrE/906/

Answer 1

Remove the pattern attribute. This is used for complex validation that requires regular expressions (and your regular expression is only matching sequences of digits). As it is, stipulating min , max , and step already define all the validation that you need:

<input type="number" min="0" max="18" step="0.5" />

http://jsfiddle.net/b8NrE/907/

Answer 2

您可以尝试：如果步骤不是.5，它将清除文本框

 <input type="number" min="0" oninput="validity.valid||(value='');" step="0.5" />