HTML5 Input Type – Number

[CodeGraphics]

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 “”)

[rodolpheb]

Hi, there is a lot of resources on the web, e.g.:

http://jquerytools.org/demos/validator/custom-validators.html
http://www.html5rocks.com/en/tutorials/forms/html5forms/

[CodeGraphics]

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

[Paulie_D]

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.

[Paulie_D]

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

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

http://html5pattern.com/

[CodeGraphics]

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.

[CodeGraphics]

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

[pixelgrid]

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

[CrocoDillon]

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]*”.

[Jozsef K.]

There is a post about this here : https://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

})

[CodeGraphics]

thank u

[__]

>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.

[Author]

Posts