#1
  1. No Profile Picture
    Super Moderator
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,563
    Rep Power
    112

    INPUT character type


    Sorry if this is better in JavaScript...

    The base, is an INPUT for a ZIP Code. 'maxlength' seems to work fine on both 'text' and 'number' type, but my intent remains at character type. Generally most posts out there define the lower 2 options. My coin-toss is if maybe my issue is my testing being on Microsoft Edge. I can type anything, including the undesired alphabetical characters. Any suggestions at limiting this to be a numeric input?

    pattern="[0-9]{5}"
    pattern=".{5,5}"

    The blunt of it is simply a how-to create a ZIP input and allow only 5 numeric characters.

    Code:
    <INPUT maxlength="5" pattern="[0-9]{5}" type="text" />
    <INPUT maxlength="5" pattern=".{5,5}" type="number" />
    <INPUT maxlength="5" pattern="[0-9]{5}" type="number" />
    <INPUT pattern="[0-9]{5}" type="text" />
    <INPUT pattern=".{5,5}" type="number" />
    If I'm right, the pattern's intent is truly just to check and provide an alert to the individual placing the input, but not be any restriction to what they are typing.
    Last edited by Triple_Nothing; August 15th, 2018 at 10:38 PM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  2. #2
  3. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,903
    Rep Power
    9646
    A string consisting of numbers and a number are two very different things. You cannot +1 or /3 a zip code. As the actual spec itself says, ask yourself whether it would make sense to have up and down arrows on the input for the user to click.

    The text type is correct.

    The pattern is just for validation. If you want to actually restrict input then you need Javascript for it. Like
    Code:
    onkeypress="return (var e=event.which || event.keyCode)<32 || e>=0x30 && e<=0x39;"
    (I think)
  4. #3
  5. No Profile Picture
    Super Moderator
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,563
    Rep Power
    112
    Well, Edge uses keycode, so only this is present for my test. (which will get added back in at the end) I was able to successfully set my range in either format. The only catch, which I can overlook if needed, was setting the variable. When trying to define the variable, it failed.

    Code:
    onkeypress="return (event.which || event.keyCode)<32 || event.keyCode>=0x30 && event.keyCode<=0x39;"
    onkeypress="return (event.which || event.keyCode)<32 || event.keyCode>=48 && event.keyCode<=57;"

    Solution: (Not sure if defining the variable within return was an option)
    Code:
    onkeypress="var e=event.which || event.keyCode;return e<32 || e>=0x30 && e<=0x39;"
    onkeypress="var e=event.which || event.keyCode;return e<32 || e>=48 && e<=57;"
    Last edited by Triple_Nothing; August 16th, 2018 at 10:53 AM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  6. #4
  7. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,903
    Rep Power
    9646
    Heh, right, yeah, "var" means it can't be in an expression.

    Hmm. Then there's
    Code:
    return /\d/.test(event.key||String.fromCharCode(event.which||event.keyCode));
    ...and I actually like that better: one-liner, regex validation, supports event.key with fallback, and it's easy to extend.

IMN logo majestic logo threadwatch logo seochat tools logo