强制移动网站输入数字

Question

我一直在使用“-wap-input-format”CSS属性，以使用“*N”来强制进行数字输入。这在我的SonyEricsson C702上有效，但在Windows Mobile IE、带Opera的Windows Mobile或SonyEricsson P1i上失败。

- Gabriël

---

尝试过了，放弃了。正如Tom所说，你可以尝试使用JavaScript，这对于高端手机来说是有效的，而你已经尝试过的CSS对于其他一些手机也是有效的，但许多手机将不会合作，这是无法解决的。服务器端验证将成为答案。 - darasd

客户端验证仅适用于方便（即提供即时反馈）。假设由客户端“检查”的数据是干净且非恶意的，这是一场等待发生的事故。服务器端验证是必须的，以确保数据符合所需格式。 - BryanH

Answer 1

在Opera或iPhone上，甚至可能也不需要在Android上使用JavaScript。只需使用HTML5中的“number”输入类型即可。它会回退到文本输入，在不支持它的浏览器上。

- dsas

Answer 2

<input type='tel' /> 

在Android和iPhone默认浏览器以及Chrome for Android上，将会弹出数字键盘。但它在Windows Phone 7.5上无法使用，但应该可以在Windows Phone 8上使用，因为WP8的浏览器是基于IE9的。

使用：

<input type='number' /> 

这样做也可以，但会自动删除前导零。

- Ivy

Answer 3

我的建议是添加一些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);
}

希望这可以帮到你！：）

metafilter.com

- Tom

Answer 4

你所说的格式是WCSS（WAP CSS）属性，因此在现代移动设备中并不被广泛支持。

-wap-input-format 在任何情况下都不能很好地工作。例如，让用户填写带有小数点的数字输入（“2.50”）几乎是不可能的（最接近的解决方案：-wap-input-format：“*n”）。

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

同样，通过在输入字段的名称中添加“zip”或“phone”（例如“myfield_zip”），也可以实现iPhone上的相同效果。是的，我知道，这很笨拙。

我仍然会使用这两个技巧，因为它们可以触发良好的可用性（如果需要，您还可以使用JavaScript来增强它们）。

- Ilya