Grow your CSS skills. Land your dream job.

Restricted the input field

  • # February 5, 2013 at 3:13 am

    hi,

    i need to restrict my input field so it can only be filled by number, i manage to restricted the input field [Example](http://codepen.io/zhepyr/pen/Apnxd “Code pen”)

    but it didn’t work like i want, all i want is to prevent user to type/input alphabet into the field.

    ohh btw, if it’s possible i want to use only javascript not jquery

    # February 5, 2013 at 3:21 am

    Hi,
    HTML5 can do this: http://www.w3schools.com/html/html5_form_input_types.asp
    And then validating the field after a submit and respond accordingly for browsers that don’t support this (yet).
    Just like you would do to check if a valid email address was entered.
    HTH

    # February 5, 2013 at 3:37 am

    yeah i tried that before but i doesn’t compatible with some browser, and about validate the field when submit i already do that
    but i think it’s more easier for user if we already restricted the input field just for number only.

    # February 5, 2013 at 4:07 am

    Ok. Then jQuery:

    $(‘.numbers’).keypress(function(key) {
    if(key.charCode < 48 || key.charCode > 57) return false;
    });

    # February 5, 2013 at 4:09 am

    Formatting on CSS-tricks is a bit tricky sorry:
    HTML:

    jQuery:
    $(‘.numbers’).keypress(function(key) {
    if(key.charCode < 48 || key.charCode > 57) return false;
    });

    # February 5, 2013 at 4:10 am

    Sorry again.
    Look at this: http://codepen.io/begetolo/pen/jvldz

    # February 5, 2013 at 5:12 am

    @Bert nice,that’s what i was looking for
    thank you very much.

    # February 5, 2013 at 8:04 am

    You’re welcome. Glad I could help.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".