7

目标：找到一种跨平台的解决方案，用于在基于触摸的移动设备上显示数字键盘，并且将黑客攻击降至最低。

问题：

我有一个使用数据输入表单的常规 Web 应用程序，主要包含数字数据。当用户在移动设备上与我的网站交互时，我想显示一个数字虚拟键盘，因为大多数标准键盘需要第二次按下才能从字母切换到数字。我知道我可以通过设置输入元素的“类型”属性来触发不同的键盘：

type=number：这在 iOS/Safari 下效果很好。我不确定平台上的其他浏览器。

在 Android 上，这不会在各种浏览器上始终提升正确的键盘，并且通常会导致输入时出现不需要的电梯按钮。我还没有找到一种干净的方法来在 CSS 中关闭这些。

type=tel：这几乎适用于 iOS/Safari，但电话键盘缺少十进制按钮。

似乎在多个 android 浏览器上都能很好地工作，而页面中没有添加任何无关的 UI 元素。

我目前的解决方案是hacky和简单化。基于我已经用于数字验证的类，我将每个应该包含数字的文本元素替换为基于检测到的操作系统/浏览器的anumber或类型的新输入。tel

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;
    });
}

我宁愿不使用浏览器检测，也不希望在运行时动态更改输入。我可能会在服务器端引入一个 http 模块，它基本上做同样的事情，但实际上并没有更好。对此没有 CSS 调用，我感到很震惊。

有没有更好的方法来获得带有小数点按钮的数字键盘，它适用于所有或大多数基于触摸的移动设备，而无需向页面添加奇怪的 UI 元素？

- - - - - - - 更新

我不认为有一种方法可以做我真正想做的事情，即设置一个可以在桌面浏览器和所有主要的基于移动触摸的平台上正常工作的单一输入样式或类型。我决定通过直接 DOM 调用而不是通过 jQuery 来更改输入的类型，而不是通过 outerHTML 重写整个输入。我怀疑效果上没有太大区别，但代码更简洁一些。由于我没有更改桌面上的输入类型，因此我不必担心 IE 对属性的只读限制。

理想情况下，我可能会在服务器端处理此问题，以便以发出请求的设备所需的格式将所有内容发送到浏览器。但现在新代码看起来更像这样：

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;
        }
    });
}
4

1 回答 1

2

提示：使用移动设备时，不要干扰用户体验。这意味着保持内置键盘不变。

一些用户甚至可能在他们的移动设备/浏览器上禁用了 Javascript！

您应该在这里做的是在浏览器中包含一个 HTML 提示。这样，移动浏览器应该知道他们正在与什么样的内容进行交互。

HTML5 包括几种新的<input>内容类型，所有现代移动设备（和大多数现代浏览器）都应支持这些内容类型

您可以在此处找到完整列表。

您具体想要的是以下内容：

旧代码：

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

新代码：

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

我不知道目前有任何浏览器支持"tel"，因此您可以使用以下内容：

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

这有点小技巧，但对您来说是另一种选择。

这是一种更简单、更易于维护的做事方式，对用户来说也更好。

请让我知道，如果你有任何问题。我知道这不是直接回答问题，但在我看来，这是目前更好的做事方式。:)

编辑：

为每个浏览器解决此问题的一种可能方法是使用 JS/Jquery 检查用户代理。我不确定如何执行此操作，但这里有一个关于如何在 .NET 中执行此操作以及使用 JQuery 更改每个元素的 CSS 的教程。

编辑编辑！：

尝试只修改您的代码：

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");
}

我希望这一切都有效！您可能需要切换这两个if语句，具体取决于您的测试结果。

于 2012-05-21T22:53:53.877 回答