javascript - How to set min and max values in a html form to decimals? - Stack Overflow

admin管理员组

文章数量:1277287

I'm trying to create a simple form with input type as number and the min and max values in the form should be in decimals.

For example the valid numbers in the input fields should be 0.1,0.2,0.3,0.4 and so on till 29.5,29.6,29.7,29.8,29.9,30.0

Hence, I have inserted the below code, Please take a look at this code:

<form>
<input type="number" min="0.1" max="30"/>
<input type="submit" value="Submit"/>
</form>

I'm trying to create a simple form with input type as number and the min and max values in the form should be in decimals.

For example the valid numbers in the input fields should be 0.1,0.2,0.3,0.4 and so on till 29.5,29.6,29.7,29.8,29.9,30.0

Hence, I have inserted the below code, Please take a look at this code:

<form>
<input type="number" min="0.1" max="30"/>
<input type="submit" value="Submit"/>
</form>

I set the min and max fields to be from 0.1 - 30

But I'm not getting the expected error message

It is asking me to enter the values in the below format :

0.1,1.1,2.1,3.1 and the last possible value is 29.1

Is there anyway to get the error message which I'm expecting?

Thanks in advance :)

• javascript
• jquery
• html

Share Improve this question Follow asked Jul 20, 2017 at 5:27 HarishHarish 1,27388 gold badges2424 silver badges4747 bronze badges 1

• 2 use step attribute of input tag – Azad Commented Jul 20, 2017 at 5:30

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 10

Use step inbuild attribute in html The step attribute works with the following input types: number, range, date, datetime, datetime-local, month, time and week.

for live example More Info

<form>
<input type="number" min="0.1" max="30" step="0.1"/>
<input type="submit" value="Submit"/>
</form>

function ForNumbers(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode;

    if (
        //0~9
        charCode >= 48 && charCode <= 57 ||
       //number pad 0~9
       charCode >= 96 && charCode <= 105 ||
        //backspace
       charCode == 8 ||
        //tab
        charCode == 9 ||
        //enter
        charCode == 13 || 
        //left, right, delete..
        charCode >= 35 && charCode <= 46
    )
    {
        //make sure the new value below 20
        if(parseInt(this.value+String.fromCharCode(charCode), 10) <= 30) 
            return true;
    }
    
    evt.preventDefault();
    evt.stopPropagation();
    
    return false;
}
document.getElementById('numIpt').addEventListener('keypress', ForNumbers, false);

<input type="text" id="numIpt" maxlength="4" />

Just add step to get decimal increase in your html.

Just set maxlength what you want and get the result.

本文标签： javascriptHow to set min and max values in a html form to decimalsStack Overflow