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.
-
tried it. gave up. As Tom says, you can try javascript, which will work for high-end phone, and the css that you've already tried will work for some others, but many phones will simply not cooperate and there is nothing that can be done about it. Server-side validation will have to be the answer.darasd– darasd2009-09-08 12:28:20 +00:00Commented Sep 8, 2009 at 12:28
-
2Client side validation is only useful for convenience (i.e., for immediate feedback). Assuming that the data 'checked' by the client will be clean and non-evil is an accident waiting to happen. Server-side validation is a must to ensure the data is in the format you require.BryanH– BryanH2009-10-13 22:11:26 +00:00Commented Oct 13, 2009 at 22:11
Add a comment
|
4 Answers
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.
Comments
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! : )
Comments
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).
Comments
<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.
