How to restrict max width in html5 number input

Question

input field should allow to enter numbers only in range -9.99 .. 99.99

I tried page below in desktop and mobile Chrome but it allows to enter big numbers, for example 99999

How to fix this using html5 ? I can for use of Chrome only it this is required.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input id="Soiduaeg" name="Soiduaeg" value="" maxlength="5" type="number" pattern="[0-9]+([\.|,][0-9]+)?">
</body>
</html>

try max="5" instead of maxlength – Shaher Jamal Eddin Jan 01 '16 at 18:59 — Shaher Jamal Eddin, Jan 01 '16 at 18:59

Bogdan Kuštan · Accepted Answer · 2016-01-01T19:31:58.727

4

You should add min and max values to input element, ant provide step="any" or step="0.01" attribute:

<input id="number" type="number" step="any" min="-9.99" max="99.99" />

For checking inputed values You need some javascript:

var $input = document.querySelector('#number');
$input.addEventListener('blur', function(){
    var val = parseFloat($input.value),
    min = parseFloat($input.getAttribute('min')),
    max = parseFloat($input.getAttribute('max'));

    if (val > max) {
        $input.value = max;
    } else if (val < min) {
        $input.value = min;
    }
});

Fiddle demo

edited Jan 01 '16 at 19:31

answered Jan 01 '16 at 19:02

Bogdan Kuštan

5,427
1
21
30

This allows to enter bigger numbers from keyboard. Pressing tab to keeps invalid number. How to fix so that invalid number is not allowed ? – Andrus Jan 01 '16 at 19:17
This saves invalid data to database without any message. Form is submitted using ajax. Form can saved using hotkey. In this case blur does not occur. How to fix this ? Maybe loop over html5 controls in ajax sbmit method, show message and cancel submit if value is not valid. – Andrus Jan 02 '16 at 15:55
Using keyup like in answer from http://stackoverflow.com/questions/18104094/how-to-restrict-user-input-character-length-of-html5-input-type-number?lq=1 max fix this. Sould your code added to keyup method ? – Andrus Jan 02 '16 at 16:24
@Andrus You should validate data in backend (PHP/APSX/NodeJS/Java/Go/Whatever) event listeners for validation are just for quick data evaluation (I don't even use them in production). Key Up method is good if You need it, I don't like it because I can't edit value if entered too big number or to small number (it sets value to smallest available). However server side validation is is better than trying to solve everything in frontend. In Froontend anybody can remove JS or rules that are bind in form, or submit for using ajax. – Bogdan Kuštan Jan 02 '16 at 16:33

score 0 · Answer 2 · answered Jan 19 '16 at 10:30

for decimal numbers , bind this to oninput event

ex: 5.2 (nnnnn.dd)

//max number positions 5 before '.' or ','
var n = 5;
//max number of digit
var d = 2;
//max text length 8
var l = n + d + 1;

if (this.value.length > n && 
   (this.value.indexOf('.') == -1 && this.value.indexOf(',') == -1))
{ 
    this.value = this.value.slice(0,n); 
} 
else 
{ 
    if (this.value.length > l)  
        this.value = this.value.slice(0,l); 
};
if (
    (this.value.indexOf('.') != -1 && this.value.length - d >= this.value.indexOf('.')) ||
    (this.value.indexOf(',') != -1 && this.value.length - d >= this.value.indexOf(','))
)
{
    this.value = this.value.slice(0, this.value.length - (this.value.length - (this.value.indexOf('.') +d+1)));
}

How to restrict max width in html5 number input

2 Answers2