Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Please help me, simple input mask 00.00

    I've been trying to figure this one out for hours, any help is much appreciated.

    I need an input mask of 00.00

    I would like to allow only numbers and set a fixed length of 5 characters including the decimal.

    This code only needs to work with internet explorer.

    If the user types a 1 it should read 00.01

    If the user type a4b3c it should display 00.43

    If the user types 4321 it should display 43.21

    If the user types 987654321 it should display 98.76

    Thanks guys,
    brumshine

  • #2
    Regular Coder
    Join Date
    Apr 2009
    Posts
    264
    Thanks
    24
    Thanked 1 Time in 1 Post
    Use Frontpage.

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ShadowIce View Post
    Use Frontpage.
    Many thanks for the thoughtful in depth response...

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    In fact what you are asking for is not at all simple, and the advice given by ShadowIce was perfectly sensible, although a little abrupt. Google for "Javascript input mask" and you will see that you will need something beyond basic Javascript for this.

    The simplest solution is to validate the user's entry onblur, stripping non-digits and formatting as xx.xx (two digits, dot, two digits). Is this supposed to be a time??

  • #5
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I googled this issue many times before finally posting this thread, the only solutions I could find involve using external scripts such as dfilter or mootools.

    This is not a time, it is a meter kwH reading.

    One difficulty I've been running into is the fact that I would like the input to start on the right side of the box...

    I really wouldn't think this would be that difficult, is it possible to do using the trim() or replace()?

  • #6
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Well, I guess one way to go about it would be:

    Code:
    <script type="text/javascript">
        function mask() {
            var masktext = document.getElementById("mask");
            var input = masktext.value;
            var input = input.match(/\d+/);
            if (input == null)
                masktext.value = "00.00";
            else {
                input = input.toString();
                if (input.length == 1)
                    masktext.value = "00.0" + input;
                else if (input.length == 2)
                    masktext.value = "00." + input;
                else if (input.length == 3)
                    masktext.value = "0" + input.match(/\d/) + "." + input.match(/\d(\d+)/)[1];
                else if (input.length == 4)
                    masktext.value = input.match(/\d\d/) + "." + input.match(/\d\d(\d+)/)[1];
                else
                    masktext.value = input.match(/\d\d/) + "." + input.match(/\d\d(\d\d)/)[1];
            }
        }
    </script>
    As to the input starting on the right side... that is pure css.... in my case, the mark-up I'm using is:

    Code:
    <input style="text-align: right;" type="text" value="" id="mask" />
    <input type="button" value="test" onclick="mask()" />
    Have a look at how that goes for you.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Suggested improvement:-

    Code:
    function mask() {
    var masktext = document.getElementById("mask");
    var input = masktext.value;
    input = input.replace(/[^0-9\.]/g,"");
    input = input.match(/\d+/);

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Actually, the poster never specified that the user *can* input a period.

    Digits only, and accept only the first four. The period is always placed after the first two digits. This per the examples he gave.

    Here's my stab at it:
    Code:
    <script>
    function funny(what)
    {
        var v = parseInt( what.value.replace(/[^\d]/g,""), 10 );
        if ( isNaN(v) ) v = 0;
        if ( v > 9999 ) v = Math.floor( v / 10 );
        v = "x" + (v + 10000);
        what.value = v.substring(2,4) + "." + v.substring(4);
    }
    </script>
    <body>
    <form>
    Try it here: 
    <input name="any_name_at_all" onkeyup="funny(this);">
    </form>
    </body>

  • #9
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You guys are great! I bow down to your leet coding skills. Hopefully someone else can find this helpful.


  • #10
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    OP ...

    Yes, but because you're calling that onkeyup it exhibits the dreaded 'kwazy kursor' syndrome. Not very user-friendly.

    Applied onblur, I broke it in about 15 seconds. I'm not sure the OP's criteria are realistic, as it's possible to write this various ways to suit the examples he posted, and still come up with gobbledygook for other input. Perhaps for some attempts, a clear rejection (with a prompt) would be more suitable?

  • #11
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Quote Originally Posted by adios View Post
    OP ...

    Yes, but because you're calling that onkeyup it exhibits the dreaded 'kwazy kursor' syndrome. Not very user-friendly.

    Applied onblur, I broke it in about 15 seconds. I'm not sure the OP's criteria are realistic, as it's possible to write this various ways to suit the examples he posted, and still come up with gobbledygook for other input. Perhaps for some attempts, a clear rejection (with a prompt) would be more suitable?

    Indeedy, took me less time to break it too... and still on key-up. Was going to comment how certain users will not react very well to typing something and having it change as they are typing, but I guess that goes into the 'user-friendly' part. Tested my own suggestion for a bit over 20 minutes yesterday with the onclick event and I didn't manage to break it. Sure, Pedant's solution is shorter, but I guess it's the OP's choice on what he wants done and how to achieve the result.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Well, if I were putting this on my *own* site, I would only use ONCHANGE.

    Screw the people who type in "AS&.1XYZ3.44400NN". And I don't care if the person who types in "17" just sees "17" until he/she goes to next field.

    Code:
    <script>
    function funny(what)
    {
        var v = "0000" + what.value.replace(/[^\d]/g,"").substring(0,4);
        v = v.substring(v.length-4);
        what.value = v.substring(0,2) + "." + v.substring(2);
    }
    </script>
    <body>
    <form>
    Try it here: 
    <input name="any_name_at_all" onchange="funny(this);">
    </form>
    </body>
    Yes, I noticed that I could break my original code. First time I tried it, actually. Decided it wasn't important as with reasonable typing speed it doesn't break, but have to admit it was sloppy solution.

  • #13
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    'funny' is a reserved word in JavaScript. Brendan Eich's idea.

    I don't think your solution was 'sloppy' - I'm just not sure if the ground rules originally specified are reasonable. Just giving some examples and desired outputs doesn't necessarily suggest a coherent algorithm.


  •  

    Posting Permissions

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