javascript - 是否有可接受的跨平台方法在基于触摸的设备上以标准 Web 形式显示数字小键盘？

Question

目标:找到一种跨平台的解决方案，用于在基于触摸的移动设备上显示数字键盘，同时尽可能减少黑客攻击。

问题:

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

类型=数字: 这在 iOS/Safari 下效果很好。我不确定该平台上的其他浏览器。

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

类型=电话: 这几乎适用于 iOS/Safari，但电话键盘缺少小数点按钮。

似乎在多个 Android 浏览器上运行良好，没有向页面添加任何无关的 UI 元素。

我目前的解决方案是老套和简单的。基于我已经用于数字验证的类，我将每个应包含数字的文本元素替换为新输入，该输入可以是 number 或 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;
        }
    });
}

Answer 1

提示:使用移动设备时，请勿干扰用户体验。这意味着保持内置键盘的原样。

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

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

HTML5 包括几个新的 <input>所有现代移动设备(和大多数现代浏览器)都应支持的内容类型

您可以找到完整列表 here .

你具体想要的是:

旧代码:

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" />

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

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

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

编辑:

为每个浏览器解决这个问题的一种可能方法是使用 JS/Jquery 检查用户代理。我不确定该怎么做，但是 here is a tutorial on how to do so in .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语句，具体取决于您的测试结果。