textbox that accepts only numbers greater or equal to 0

Printable View

07-05-2017, 04:40 PM
gib65

textbox that accepts only numbers greater or equal to 0

Hello,

I'm looking for a way to make my textbox only accept numbers. It needs to accept all numbers greater or equal to 0 and any number of decimals. No negatives.

I found this online:

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

While this accomplishes almost everything I want, it has this odd glitch of not allowing any numbers in the decimal expansion except 0's. For example, if I type this:

8.0000

...it accepts it, but if I try to type:

8.00001

...it clears the field.

Try it:

https://jsfiddle.net/scrjhokk/

If anyone can help me fix this one glitch, this would be perfect for me. If not, then can anyone suggest an alternative way of doing this?
07-05-2017, 05:07 PM
Beverleyh

Use the step attribute https://www.w3.org/TR/2012/WD-html5-...ttr-input-step
07-05-2017, 08:09 PM
gib65

Quote:

Originally Posted by Beverleyh

Use the step attribute https://www.w3.org/TR/2012/WD-html5-...ttr-input-step

Thanks Beverley, that works.

There's just one thing about I'd like to ask of you: I noticed you can enter more than one decimal, like so:

0.6.

It will allow you to enter the second . after the 6, though entering anything after the second decimal results in the whole field being wiped away. It would be better if the second . wasn't allowed at all. Do you know how to do that?

Thanks.
07-06-2017, 10:01 AM
simonf

HI

Try

Code:

<input type="number" name="points" step="0.1">

Which allows for the defined number of decimal places, use step=".1", which allows up to one decimal places. "0.001" three etc
07-06-2017, 06:05 PM
Beverleyh

I think you'll need more than HTML; A JavaScript function that probably checks keyCodes, on keypress, to only permit numbers and a dot. Additionally, it would need to count the dots to prevent any more than 1 from being entered. If you Google something like "restrict input to numbers and decimals JavaScript" that should give you somewhere to start your research.
07-06-2017, 09:55 PM
coothead

Hi there gib65,

here is one possible solution - (though, it does not work in IE11) ...

Code:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <title>untitled document</title> <link rel="stylesheet" href="screen.css" media="screen"> </head> <body> <form action="http://www.example.com"> <input id="number" type="number" min="0" step="any" name="number" required> <input type="submit"> </form> <script> (function() { 'use strict'; var temp; document.getElementById('number').addEventListener('input', function() { if( this.validity.valid ) { temp = this.value; } else { this.value = temp; } },false); }()); </script> </body> </html>

coothead
07-10-2017, 04:22 PM
gib65

Thanks everyone,

I managed to get the only-one-decimal thing solved with a javascript key event function.
07-10-2017, 10:26 PM
styxlawyer

Quote:

Originally Posted by gib65

Thanks everyone,

I managed to get the only-one-decimal thing solved with a javascript key event function.

Perhaps you would like to share your solution so that others might benefit in the future.
07-11-2017, 08:28 PM
styxlawyer

Quote:

Originally Posted by styxlawyer

Quote:

Originally Posted by gib65

Thanks everyone,

I managed to get the only-one-decimal thing solved with a javascript key event function.

Perhaps you would like to share your solution so that others might benefit in the future.

Oh well, I tried. I guess you're not interested in helping others.