Log in

View Full Version : textbox that accepts only numbers greater or equal to 0


gib65
07-05-2017, 04:40 PM
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?
Beverleyh
07-05-2017, 05:07 PM
Use the step attribute https://www.w3.org/TR/2012/WD-html5-20121025/common-input-element-attributes.html#attr-input-step
gib65
07-05-2017, 08:09 PM
Use the step attribute https://www.w3.org/TR/2012/WD-html5-20121025/common-input-element-attributes.html#attr-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.
simonf
07-06-2017, 10:01 AM
HI

Try


<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
Beverleyh
07-06-2017, 06:05 PM
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.
coothead
07-06-2017, 09:55 PM
Hi there gib65,


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



<!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
gib65
07-10-2017, 04:22 PM
Thanks everyone,

I managed to get the only-one-decimal thing solved with a javascript key event function.
styxlawyer
07-10-2017, 10:26 PM
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.
styxlawyer
07-11-2017, 08:28 PM
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.