Force numeric input for mobile website

Question

I've been using the '-wap-input-format' CSS property to force to numeric input using "*N". 307This works on my SonyEricsson C702, but fails on Windows Mobile IE, Windows Mobile with Opera or SonyEricsson P1i.

Answer 1

My suggestion is also to add some Javascript. Mobile Opera as well as the iPhone, Minimo (mini-mozilla) and more can understand Javascript, at least to some extent.

function noNumbers(e) {
    var keynum;
    var keychar;
    var numcheck;    
    if(window.event) // IE
    {
        keynum = e.keyCode;
    }
    else if(e.which) // Netscape/Firefox/Opera
    {
        keynum = e.which;
    }

    if((keynum >= 48) && (keynum <= 57)) {
        return(true);
    }

    var good_codes = [8, 14, 15, 37, 38, 39, 40];
    for(i = 0; i < good_codes.length; i++) {
        if(good_codes[i] == keynum) {
            return(true);
        }
    }

    return(false);
}

Hope this helps! : )

metafilter.com

Answer 2

You don't need javascript on Opera or iphone and probably not android either. Just use the "number" input type, from HTML5. It'll fall back to a text input on browsers that don't support it.

Answer 3

The format you're talking about is a WCSS (WAP CSS) property, and as such, isn't very widely supported — especially in modern mobile devices.

The -wap-input-format doesn't work very well in any case. For example, having users fill in a numeric input with decimals ("2.50") is next to impossible (closest solution: -wap-input-format: "*n").

However, while the property can't be relied on for validation (this still needs to be server-side, in any case, as Darasd said), it can help users by automatically switching the mobile device's input to numeric.

The same is said to be possible for iPhones by adding "zip" or "phone" to the input field's name (eg. "myfield_zip"). Yeah, I know, this is clunky.

I'd still use both tricks, as it triggers a nice affordance (and you can use Javascript in addition to them, if you want).

Answer 4

<input type='tel' /> 

will bring up a numeric keypad on Android and iPhone default browsers and Chrome for Android. It does not work on Windows Phone 7.5, but should on Windows Phone 8 since WP8's browser is based on IE9.

Using

<input type='number' /> 

will do this too, but will automatically remove leading zeros.