Results 1 to 9 of 9

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

  1. #1
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default 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?

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Beverleyh View Post
    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.

  4. #4
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    406
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    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
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  6. #6
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,078
    Thanks
    1
    Thanked 204 Times in 200 Posts

    Default

    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
    ~ the original bald headed old fart ~

  7. #7
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Thanks everyone,

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

  8. #8
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    413
    Thanks
    0
    Thanked 47 Times in 44 Posts

    Default

    Quote Originally Posted by gib65 View Post
    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.

  9. #9
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    413
    Thanks
    0
    Thanked 47 Times in 44 Posts

    Default

    Quote Originally Posted by styxlawyer View Post
    Quote Originally Posted by gib65 View Post
    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.

Similar Threads

  1. PowerZoomer not working with jQuery greater than 1.6.4?
    By Chris52 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-16-2016, 03:23 PM
  2. Replies: 0
    Last Post: 10-10-2007, 12:19 AM
  3. Hiden form pieces shown when user accepts agreements...
    By Rockonmetal in forum JavaScript
    Replies: 1
    Last Post: 05-10-2007, 11:16 AM
  4. Greater than or Less than game!
    By roflmao456 in forum Submit a DHTML or CSS code
    Replies: 0
    Last Post: 10-17-2006, 11:40 PM
  5. a greater challenge
    By ito in forum JavaScript
    Replies: 24
    Last Post: 09-10-2006, 08:10 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •