Number field types for both iOS and Android phones

It’s a lot of work to be filling out a form from a mobile phone. Which is why we need to make it extra easy for them to input their data. One of the simplest things you can do is indicate that a field such as a phone number, zip code, or x is numeric. This will prevent them from having to switch their keyboard to a number pad, as it will happen automatically.

The bummer is that iPhones, iPods, and iPads react undesirably on the type=number directive. They will open the number keyboard, but maxlength is not honored and commas are auto inserted. The commas may be great for some applications, but it makes fields like a postal code look weird. The workaround on iOS devices is to specify a pattern for the input to follow.

Of course this pattern doesn’t work on Android, so you must use “<input type=”number” />” for Android, and “<input type=”text” />” for iOS.

Here’s a PHP code snippet that will detect and do this for you automatically:

//android and ios devices respond differently to number fields
$numberfieldtype = 'type="text" pattern="[0-9]*"';
if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']),"android"))
{
	$numberfieldtype = 'type="number"';
}

Then use this html:

<input type="text" name="zipcode" maxlength="5" <?php echo $numberfieldtype; ?>>

Hope that helps!