www.webdeveloper.com
Results 1 to 7 of 7

Thread: textbox to accept only numbers (digits)

  1. #1
    Join Date
    Oct 2012
    Location
    istanbul
    Posts
    64

    textbox to accept only numbers (digits)

    Hello,

    This code, how to use for multi-input?

    http://jsfiddle.net/lesson8/HkEuf/1/

    Thank you in advance

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,654
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Digits only</title>
    <style type="text/css">
    body{color:#000;background-color:#fff;font-family:'Bookman Old Style',Georgia,Verdana;font-size:14px;}
    input{text-align:center;margin-top:5px;}
    span.err{display:none;color:Crimson;padding-left:5px;font-weight:bold;}
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('input[class=digs]').keypress(function(e){
    if(e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)){
    $(this).next().html("Digits Only").show().fadeOut("slow");
    return false;
    }
    });
    $('input[class=digs]:first').focus();
    });
    </script>
    </head>
    <body>
    <h4>Only digits</h4>
    <input class="digs" type="text" size="10" /><span class="err"></span><br />
    <input class="digs" type="text" size="10" /><span class="err"></span><br />
    <input class="digs" type="text" size="10" /><span class="err"></span><br />
    <h4>Any content</h4>
    <input type="text" size="10" />
    </body>
    </html>

  3. #3
    Join Date
    Oct 2012
    Location
    istanbul
    Posts
    64
    It was excellent,
    Thank you very much

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,654
    you're welcome )

  5. #5
    Join Date
    Mar 2011
    Posts
    1,148
    Or....

    If you can live without support from IE 6-8, you can just use HTML 5's:
    Code:
    <input type="number" min="1" max="100" required>
    ...and you can keep the JavaScript validation as a back-up, of course. Just a thought.

  6. #6
    Join Date
    Oct 2012
    Location
    istanbul
    Posts
    64
    I have a small question:

    http://awesomescreenshot.com/0f81lvg155
    When the page refreshed, the cursor comes to there (see: img)
    The code below causes to that, Can I remove this code? Will any problem come?

    $('input[class=digs]:first').focus();

  7. #7
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,654
    of course you can. this line was only for convenience of the demonstration

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles