Grow your CSS skills. Land your dream job.

HTML5 Input Type – Number

  • # June 9, 2013 at 5:06 am

    Is there a way to remove the default style of the html5 input type=”number”? I want it to still validate by demanding that only numbers by typed in, but I don’t want the default style ‘up and down’ buttons at the extreme right. Codepen [here.](http://codepen.io/codegraphics/pen/Goduy “”)

    # June 9, 2013 at 6:57 am

    Am not looking for form validator. Read my post very well.

    # June 9, 2013 at 7:11 am

    I think what he is saying is that there is no real way to do what you want so you should be looking into using another input type and setting up validation for just numbers.

    # June 9, 2013 at 7:18 am

    You might try using a standard input with a ‘pattern’ attached.

    http://html5doctor.com/html5-forms-introduction-and-new-attributes/

    http://html5pattern.com/

    # June 9, 2013 at 8:05 am

    yes. i used pattern. like – patter=”[0-9]“
    But when i just entered 123 in the input field it refused. I even entered 0123456789, it kept saying – please match the requested format. I want people to be able to type in number and not text. Then i want then to have freedom to type any number in whatever way. Like: 919971951997 0r 2348034214407, etc.

    # June 9, 2013 at 8:18 am

    I again used this: pattern=”[+]d{3}[(]d{2}[)]d{4}[-]d{4}”
    But it will only accept a number like this: +233(80)2222-3333
    What of countries that have two digits code. Like: +91(90)2222-3333

    # June 9, 2013 at 8:46 am

    pattern=”[+]d{2,3}[(]d{2}[)]d{4}[-]d{4}”

    # June 9, 2013 at 8:52 am

    If you want any integer it’s as simple as “[0-9]+” or “d+”. The + means 1 or more occurrences, that’s why “[0-9]” doesn’t work, it means exactly 1 occurrence.

    If you don’t want it to start with a zero, “[1-9][0-9]*”.

    # June 9, 2013 at 9:03 am

    There is a post about this here : http://css-tricks.com/snippets/css/turn-off-number-input-spinners/

    Of course it works only in webkit engines, so the pattern attribute on input type text is a good option, or you could try input type tel

    If you would prefer a number only limit on keypress, here is my code:


    $(selector).keydown(function(evt) {
    var co=evt.keyCode
    if((co > 57 && co < 96) || co > 105) return false
    })
    # June 9, 2013 at 9:21 am

    thank u

    __
    # June 9, 2013 at 2:55 pm

    >I want it to still validate by demanding that only numbers by typed in


    >I again used this: pattern=”[+]d{3}[(]d{2}[)]d{4}[-]d{4}”

    Are you trying to make an input for **numbers** or for **telephone** numbers? Don’t forget about `type=tel` if it’s the latter case – you’ll still need to use your pattern for validation, but it would solve the styling issue. AFAIK, no browser adds and particular styling to `tel` inputs.

    Speaking of the pattern, however, you might want to do it via javascript (in addition, of course, to server-side validation). There are many,many different phone number formats, as well as many,many acceptable ways to format them – to the point that making a regex match every possible acceptable value is impractical. Your current pattern forces users to follow a single, specific format, which can be very frustrating. (It also won’t accept a U.S. phone number, which follows the pattern `+1d{3}d{3}d{4}` (note the *single-digit* country code and the *3-digit* city(area) code, followed by 3 digits + four digits – all with optional formatting, of course).)

    Personally, I think the “best” approach to phone number validation is to simply *remove* all non-numeric characters from the string, and then check how many digits there are. You might also want to provide separate inputs for the country code / city code, to reduce potential confusion.

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

You must be logged in to reply to this topic.

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