www.webdeveloper.com
Results 1 to 8 of 8

Thread: input box + regex, small issue

  1. #1
    Join Date
    Mar 2007
    Posts
    195

    input box + regex, small issue

    I am in the processing of recoding a website and for some reason a small piece of code does not work for me anymore.

    this code is for an input text field
    Code:
    onkeydown="if(this.value.length>1){this.value=this.value.replace(/^(\d{2})(\.*)(\d{0,3})/g, '$1\.$3');};"
    basically the user is allowed to type in 4 digits and this code puts a decimal in the middle.

    so the format will be ##.##

    but what is happening to me now is that if ##.## is in the input box then i can only backspace the last two numbers and it just hangs up on the decimal, i have no idea why.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391
    Untested, but can you try this ...
    Code:
    onkeydown="if(this.value.length>1){this.value=this.value.replace(/^(\d{2})(\.*)(\d{0,3})/g, '$1$2$3');};"

  3. #3
    Join Date
    Mar 2007
    Posts
    195
    no that isnt even putting the decimal in
    i am now just testing this single line of code in an html file.
    play with it if you would like.

    i can't remember why i did it the way i did since it has been a few years.
    i might just write a separate function to handle it, would much rather prefer a simpler way though thru regex.

    Code:
    <input maxlength="5" size="5" onkeydown="if(this.value.length>1){this.value=this.value.replace(/^(\d{2})(\.*)(\d{0,3})/g, '$1\.$3');};">

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    Lightbulb Another try ...

    Not as tight as your original, but it does handle negative numbers...
    Code:
    <html>
    <head>
    <title>Limited Input</title>
    <script type="text/javascript">
    // From: http://www.dynamicreport.com/1010.php
    
    function  input_filterAmt (str, dec, bNeg) { // auto-correct input - force numeric data based on params.
     var cDec = '.'; // decimal point symbol
     var bDec = false; var val = "";
     var strf = ""; var neg = ""; var i = 0;
    
     if (str == "") return parseFloat ("0").toFixed (dec);
    
     if (bNeg && str.charAt (i) == '-') { neg = '-'; i++; }
    
     for (i; i < str.length; i++) {
      val = str.charAt (i);
      if (val == cDec)  {
        if (!bDec) { strf += val; bDec = true; }
      } else {
        if (val >= '0' && val <= '9') { strf += val; }
      }
      strf = (strf == "" ? 0 : neg + strf);
      return parseFloat (strf).toFixed (dec);
     }
    }
    
    </script>
    </head>
    <!-- From: http://www.webdeveloper.com/forum/showthread.php?p=1076404#post1076404 -->
    <body>
    <input maxlength="5" size="5" value="" onchange="this.value=input_filterAmt(this.value,2,true)">
    </body>
    </html>
    Good Luck!

  5. #5
    Join Date
    Mar 2007
    Posts
    195
    i want to get it to work onkeydown
    so that as you type the decimal is inserted.
    my code works fine for typing the number in but wont let me backspace all of it out.
    yours also has the backspace issue for onkeydown.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    Arrow Something else to consider ...

    Once the decimal is put into the value, you have no provision to remove it, hence the backspace problem with the onkeydown logic.

    The decimal is placed in the output on the way out of the function if you do not type it explicitly.
    With the onchange code, you can backspace the decimal out, so I'm not sure what the problem is there.

    Here is a revised version of the code:
    Code:
    <html>
    <head>
    <title>Limited Input</title>
    <script type="text/javascript">
    // For: http://www.webdeveloper.com/forum/showthread.php?p=1076404#post1076404 -->
    // Modified function from: http://www.dynamicreport.com/1010.php
    
    function  input_filterAmt (str, dec, bNeg) { // auto-correct input - force numeric data based on params.
      var cDec = '.'; // decimal point symbol
      var bDec = false; var val = "";
      var strf = ""; var neg = ""; var i = 0;
      if (str == "") return parseFloat ("0").toFixed (dec);
      if (bNeg && str.charAt (i) == '-') { neg = '-'; i++; }
      for (i; i < str.length; i++) {
        val = str.charAt (i);
        if (val == cDec)  { if (!bDec) { strf += val; bDec = true; } }
                     else { if (val >= '0' && val <= '9') { strf += val; } }
        strf = (strf == "" ? 0 : neg + strf);
      }
      return parseFloat (strf).toFixed (dec);
    }
    </script>
    </head>
    <body>
    <input maxlength="5" size="5" value="" onchange="this.value=input_filterAmt(this.value,2,true)">
    </body>
    </html>

  7. #7
    Join Date
    Mar 2007
    Posts
    195
    the issue is that i do not want to do onchange, i want to do it onkeydown.
    that way the decimal will actually show as they are typing, so once they have two digits in the decimal automatically goes in.
    or they can type in the decimal themselves.

    i am essentially having people type seconds and milliseconds into this field

    so these are all of the possibilities that they would be able to type in:

    Code:
    ##.##
    ##.#
    ##
    #.##
    #.#
    #
    .##
    .#
    now again, the decimal will be forced once two digits are types in, otherwise they can type in the decimal themselves.

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    Exclamation

    Quote Originally Posted by ripken204 View Post
    the issue is that i do not want to do onchange, i want to do it onkeydown.
    ...
    now again, the decimal will be forced once two digits are types in, otherwise they can type in the decimal themselves.
    Well, you can force the decimal to show up
    OR
    you can backspace to remove it
    BUT
    not both conditions with the onkeydown event

    They are mutually exclusive as far as I can see.

    I can attempt some more changes with the "onchange" event,
    but if you are adamant about using the "onkeydown", you'll need to show me.

    Good Luck!

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