SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast bonkedproducer's Avatar
    Join Date
    Sep 2003
    Location
    Nashville, TN
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Allowing/Preventing charCodes in INPUT

    Ok, I'm having a devil of a day trying to find out how to do this and search and google are not being friendly.

    I need to prevent a user from entering any keystrokes other than numerics, the decimal, and the "-" key (and if possible, ensure they don't enter more than 2 decimals, or already have a 0.00 and fill from left) in a HTML input field.

    I have found numerous solutions that would limit users to only numerics, but didn't allow the decimal, or numerous ones that would wait until the user has finished the form, and them prompt them with an error.

    What I really want is something that just ignores other keystrokes, like this:
    <HTML>
    <HEAD>
    <SCRIPT language=Javascript>
    <!--
    function isNumberKey(evt)
    {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
    return false;

    return true;

    }
    //-->
    </SCRIPT>
    </HEAD>
    <BODY>
    <INPUT id="txtChar" onkeypress="return isNumberKey(event)"
    type="text" name="txtChar">
    </BODY>
    </HTML>

    But also allow the period (Keycode 190) the decimal (Keycode 110) and strip anything past a second decimal on the fly without the user having to deal with an alert box. Anyone know of a script to do this, or how to modify what I have above to do this?


    "Clothes make the man;
    naked people have little influence in society." - Twain
    http://paulcouture.com
    Magical Snow and Letters from Santa

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I prefer using the keyup event over keypress.
    If you hijack the input on keypress, there is no clue to the user what is wrong- they may think they lost focus on the text box.

    Using keyup, an invalid character appears when they press the key, then disappears when they release it. They can see what is going on.

    You could make it a tight little anonymous function assigned to the element, or make it a function you can call from any input, as your example uses.

    Regular expressions are easier to filter with than keyCodes for all but the simplest matches, so that's what I use here.


    document.getElementById('txtChar').onkeyup= validate_signedFloats;

    function validate_signedFloats(e){
    // get the textbox and its value
    var who= window.event? event.srcElement: e.currentTarget;
    var txt= who.value, M;
    if(!txt) return;

    // remove characters never allowed:
    txt= txt.replace(/[^\d\-\.]/g,'');

    // remove any minus signs that are not the first character
    txt= txt.charAt(0)+ txt.substring(1).replace(/\-/g,'');

    //If there is more than one decimal period, remove all after the first

    while( (M= txt.match(/(\.)/g) ) !=null){
    if(M.length== 1)break;
    txt= txt.slice(0,-1);//this works because you process each character
    }
    who.value= txt;
    }
    Last edited by mrhoo; Jan 9, 2007 at 09:50. Reason: formatting

  3. #3
    SitePoint Enthusiast bonkedproducer's Avatar
    Join Date
    Sep 2003
    Location
    Nashville, TN
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Quote Originally Posted by mrhoo View Post
    I prefer using the keyup event over keypress.
    If you hijack the input on keypress, there is no clue to the user what is wrong- they may think they lost focus on the text box.

    Using keyup, an invalid character appears when they press the key, then disappears when they release it. They can see what is going on.
    Thanks for the reply - sorry the thanks came so late, this seems to be what I am looking for - now here's a real kicker, how hard would be to check on Keyup if the value is <= 0.00 and change the style to "color:red"?
    "Clothes make the man;
    naked people have little influence in society." - Twain
    http://paulcouture.com
    Magical Snow and Letters from Santa


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
  •