强制移动网站的数字输入

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.

我一直在使用'-wap-input-format'CSS属性强制使用“* N”进行数字输入。 307这适用于我的SonyEricsson C702,但在Windows Mobile IE,Windows Mobile with Opera或SonyEricsson P1i上失败。

4 个解决方案

#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.

我的建议也是添加一些Javascript。移动Opera以及iPhone,Minimo(迷你mozilla)以及更多可以理解Javascript,至少在某种程度上。

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

#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.

你不需要在Opera或iPhone上使用javascript,也可能不需要android。只需使用HTML5中的“数字”输入类型即可。它将回退到不支持它的浏览器上的文本输入。

#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.

您所讨论的格式是WCSS(WAP CSS)属性,因此不受广泛支持 - 尤其是在现代移动设备中。

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").

-wap-input格式在任何情况下都不能很好地工作。例如,让用户填写带小数(“2.50”)的数字输入几乎是不可能的(最接近的解决方案:-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.

但是,虽然不能依赖该属性进行验证(这仍然需要服务器端,无论如何,正如Darasd所说),它可以通过自动将移动设备的输入切换为数字来帮助用户。

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.

通过在输入字段的名称中添加“zip”或“phone”(例如“myfield_zip”),可以说iPhone是可能的。是的,我知道,这很笨重。

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

我仍然使用这两个技巧,因为它触发了一个很好的可供性(如果你愿意,你可以使用除了它们之外的Javascript)。

#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.

将在Android和iPhone默认浏览器和Chrome for Android上打开数字小键盘。它不适用于Windows Phone 7.5,但应该在Windows Phone 8上运行,因为WP8的浏览器基于IE9。

Using

<input type='number' />

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

也会这样做,但会自动删除前导零。

#1