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-...ttr-input-step

**gib65** · 07-05-2017, 08:09 PM

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.

**simonf** · 07-06-2017, 10:01 AM

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

**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) ...

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

**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

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.

**styxlawyer** · 07-11-2017, 08:28 PM

Originally Posted by styxlawyer

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.

Thread: textbox that accepts only numbers greater or equal to 0

Thread Tools

Search Thread

textbox that accepts only numbers greater or equal to 0

Similar Threads

PowerZoomer not working with jQuery greater than 1.6.4?

form validation Greater than not a number

Hiden form pieces shown when user accepts agreements...

Greater than or Less than game!

a greater challenge

Bookmarks

Bookmarks

Posting Permissions