How to restrict input?

Question

I have input where user must enter the number of the with no more than 4 decimal places:

<input type="text" name="price" />

how to do that, so it is impossible to enter more than 4 digits after the decimal point?

may be this will help you http://stackoverflow.com/questions/10570722/restrict-input-field-to-two-decimals-with-jquery — Bhushan Kawadkar, May 23 '14 at 13:38

Afzaal Ahmad Zeeshan · Answer 1 · 2014-05-23T13:46:45.140

There is a method for that too,

.toFixed(4); // 4 would be the number of ints after decimal point.

It would get/allow only 4 characters after the . character.

The toFixed() method formats a number using fixed-point notation.

Further more you can learn some more from the Document I have attached to the post. They have a well explained Example of this method too.

From Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed

Oriol · Answer 2 · 2014-05-25T13:55:10.193

0

In HTML5:

<input type="number" step="0.0001" />

Demo

If you want to style invalid inputs (some browsers do it by default), you can use :invalid selector:

input:invalid {   box-shadow: 0 0 1.5px 1px red;   }

Note this approach won't attempt to truncate the number automagically, but if the user enters more than four decimal digits, the input will become invalid, and thus the form won't be submitted:

Screenshot on Firefox

edited May 25 '14 at 13:55

answered May 23 '14 at 13:43

Oriol

274,082
63
437
513

1

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. – madhead May 23 '14 at 14:12
Why do so many people think that this doesn't answer the question? Please clarify :S – Oriol May 23 '14 at 17:14
1

the question is dumb, and your answer is not exact. It does not check for number of digits. It only sets stepping. – madhead May 24 '14 at 17:34
@madhead OP wants to restrict number of digits after decimal point. Setting step of 0.0001 will make the input invalid if the number has more than 4 decimal digits. It won't modify the number attempting to "fix" it, if that's what you mean. – Oriol May 24 '14 at 20:16
try it yourself: http://jsfiddle.net/sv9hX/ it only affects `stepping`: http://screencast.com/t/JtuHMPWldt – madhead May 25 '14 at 10:07
@madhead Yes, but if a form contains an invalid input, the form won't be submitted: [fiddle](http://jsfiddle.net/2h4TC), [screenshot](http://i.stack.imgur.com/u7nWm.gif). I have edited my answer, I hope now it's more clear. – Oriol May 25 '14 at 13:55
On my Linux Mint with Chrome v35 the form is not validated: http://screencloud.net/v/p4TZ – madhead May 25 '14 at 14:37
@madhead Because the restriction doesn't affect all digits, only decimal ones, like OP said: "no more than 4 decimal places" – Oriol May 25 '14 at 14:46

score 0 · Answer 3 · answered May 23 '14 at 13:55

$("#price").on('keyup',function(){
    $("#price").val($("#price").val().replace(/[^\d.-]/g, ''));
    var price = parseFloat($("#price").val());
    var decimals = ((price).toFixed(5)).replace(/^-?\d*\.?|0+$/g, '').length;
    if(decimals >= 4)
    {
       $("#price").val(price.toFixed(4));
    }
});

Determines the number of decimals, if it's greater than 4 it sets the value in the input back to 4.

Also doesn't allow any non-numeric characters in the input.

Error pop ups are crap UI. http://jsfiddle.net/calder12/z4f5B/3/

score 0 · Answer 4 · answered May 23 '14 at 14:44

0

User toFixed:

<input type="text" name="price" onBlur="this.value = parseFloat(this.value).toFixed(4);" />

answered May 23 '14 at 14:44

Italo Borssatto

15,044
7
62
88

score -2 · Answer 5 · answered May 23 '14 at 13:45

-2

Add maxlength="4" to your input code.

<input type="text" name="price" maxlength="4" />

answered May 23 '14 at 13:45

MCRocks999

129
1
10

1

maxlength will invalidate 12345, 12.345 and possibly even 123.4, depending on how the period is interpreted. – Nzall May 23 '14 at 13:46

How to restrict input?

5 Answers5