Is there an acceptable cross-platform method for displaying a numeric keypad in standard web forms on a touch device?

Question

Purpose : to find a cross-platform solution for displaying numeric keypads on mobile touch devices with minimal hacks.

Problem :

I have a regular web application using data entry forms containing mostly numeric data. When a user interacts with my site on a mobile device, I would like to display a digital virtual keyboard, since most standard keyboards require a second press to switch from alpha to numbers. I know that I can run a different keyboard by setting the "type" attribute of the input element:

type=number : This works great under iOS / Safari. I am not sure about other browsers on the platform.

In Android, this does not constantly raise the correct keyboard in different browsers and often leads to unwanted elevator buttons on the input. I have yet to find a clean way to disable them in CSS.

type=tel : This almost works on iOS / Safari, but there is no decimal button on the phone keypad.

It seems to work fine in multiple Android browsers, without adding additional user interface elements to the page.

My current solution is hacky and simplistic. Based on the class that I already use for numerical verification, I replace every text element that should contain a number with a new input, which is either the type number or tel based on the detected OS / browser.

 var isAndroid = navigator.userAgent.match(/android/i) ? true : false; var isIOS = navigator.userAgent.match(/(ipod|ipad|iphone)/i) ? true : false; if (isAndroid || isIOS) { var useNumberType = (isIOS ? true : false); //iOS uses type=number, everyone else uses type=tel jQuery("input.num").each(function () { var type = (useNumberType ? "number" : "tel"); var html = this.outerHTML; html = html.replace(/(type=\"?)text(\"?)/, "$1" + type + "$2"); this.outerHTML = html; }); } 

I would prefer not to use browser detection and not change inputs on the fly at runtime. I could imagine a server-side http module that did basically the same thing, but that is not substantially better. I am shocked that there is no CSS request for this.

Is there a better way to get a numeric keypad with a decimal button that works on all or most touch mobile devices without adding weird user interface elements to the page?

-------------- update

I don’t think there is a way to do what I really want to do, namely to configure one input style or type that will work well in desktop browsers and on all major mobile touch platforms. I decided to change the input type through a direct DOM call, and through jQuery instead of rewriting all the input through outerHTML. I suspect it doesn't make much difference, but the code is a little cleaner. Since I do not change the input types on the desktop, I do not need to worry about restricting IE reading to this attribute only.

Ideally, I would probably handle this on the server side so that everything is sent to the browser in the format required by the device making the request. But now the new code looks something like this:

 var isAndroid = navigator.userAgent.match(/android/i) || navigator.platform.match(/android/i) ? true : false; var isIOS = navigator.userAgent.match(/(ipod|ipad|iphone)/i) ? true : false; if (isAndroid || isIOS) { var useNumberType = (isIOS ? true : false); //iOS uses type=number, everyone else uses type=tel jQuery("input.num").each(function () { var type = (useNumberType ? "number" : "tel"); if (this.type == "text") { this.type = type; } }); } 

Answer 1

Protip: DO NOT USE the user when using a mobile device. This means keeping the built-in keyboards as they are.

Some users may even disable Javascript on their mobile devices / browsers!

What you have to do here is to include the HTML tooltip in the browser. Thus, mobile browsers need to know what content they are interacting with.

HTML5 includes several new types of <input> content that should be supported on all modern mobile devices (and in most modern browsers).

You can find the full list here .

In particular, you want:

Old code:

 Phone number: <input type="text" name="phone" /> 

New code:

 Phone number: <input type="tel" name="phone" /> 

I do not know that "tel" browsers are currently supported, so you can use something like the following:

 Phone number: <input type="number" name="phone" min="1000000000" max="9999999999" /> 

This is a little hack, but this is another option for you.

This is a BIG simpler and more convenient way to do things better for the user.

Please let me know if you have any questions. I know that this does not directly answer the question, but in my opinion, this is the best way to do this. :)

EDIT:

A possible way around this for each browser is to check the user agent using JS / Jquery. I'm not sure how to do this, but here is a tutorial on how to do this in .NET and changing CSS for each element using jQuery.

EDIT EDIT !:

Try simply changing the code as such:

 var isAndroid = navigator.userAgent.match(/android/i) ? true : false; var isIOS = navigator.userAgent.match(/(ipod|ipad|iphone)/i) ? true : false; if(isIOS) $(.phoneInput).attr("type", "tel"); if(isAndroid) { $(.phoneInput).attr("type", "number"); $(.phoneInput).attr("min", "1000000000"); $(.phoneInput).attr("max", "9999999999"); } 

I hope this is all! You may need to switch the two if , depending on how your testing goes.