Numeric HTML fields, keyboards, and zip codes

This post is more than 2 years old.

Just a quick tip I want to share with folks. I had a simple form field that included two fields for zip codes. Both used type="number". While testing in iOS6, I discovered that when I entered 02180 as a zip code, Safari "fixed" it by removing the 0 in front. Ok, I guess that makes sense, but it obviously wasn't helpful.

I switched the type to text and it fixed that issue, but it meant the keyboard display reverted to the normal text-based layout. Not a huge issue, but when I complained on Twitter, a few users chimed in with ideas.

Peter Daams (@daamsie) suggested this: <input type="text" pattern="[0-9]*">

I didn't think it was worthwhile to try this as it would still use the text keyboard. Or so I thought. Peter suggested trying it anyway so I did.

Surprisingly - iOS actually showed the numeric keyboard. I'm not sure why - but it almost seems as if it realized that the pattern filter in place was - essentially - numbers only.

Unfortunately, it did not work the same in Android. Peter suggested type="tel" as another workaround, but I left it as is. I find this behavior interesting though and I wanted to put this out there in case others had noticed it as well.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Peter posted on 9/21/2012 at 6:55 AM

Yeah, it really bugged me when this changed (when iOS5 was released). The specific problem in our case was credit card numbers which could quite validly start with a 0.

I do wonder if other patterns unlock different keyboards as well - ie email, url

Comment 2 by Raymond Camden posted on 9/21/2012 at 4:06 PM

I tried some more examples, but nothing else seemed special like this. Interestingly enough, when I did [0-5]*, it didn't use the numeric keyboard. I bet you it is *just* for 0-9.

Comment 3 by Nando Breiter posted on 10/4/2012 at 1:26 AM

A pet peeve of mine are web forms that enforce, particularly, numeric validation on zip codes and phone numbers, making it impossible for folks outside of the US to register to vote, renew their drivers license, order a birth certificate, buy stuff online, etc. Zip codes and phone numbers are text, period, of an undetermined length. You never have to do mathematical operations on them, so validating them as numerical is not necessary, and only prevents some folks from entering their VALID phone number or zip code - the one they can be contacted with!