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

Question

目标:找到一个跨平台解决方案,用于在移动触摸设备上显示数字键盘,并且只需最少的黑客攻击.

问题:

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

type=number:这在iOS/Safari下运行良好.我不确定该平台上的其他浏览器.

在Android上,这并不能在各种浏览器上持续提升正确的键盘,并且通常会在输入上产生不需要的电梯按钮.我还没有找到一种干净的方法来在CSS中关闭它们.

type=tel:这几乎适用于iOS/Safari,但电话键盘没有小数点按钮.

似乎在多个Android浏览器中运行良好,没有任何无关的UI元素添加到页面.

我目前的解决方案是hacky和简单.基于我已经用于数字验证的类,我将每个应该包含数字的文本元素替换为基于检测到的OS /浏览器的新输入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>内容类型，所有现代移动设备（以及大多数现代浏览器）都应支持这些类型

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

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

旧代码：

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语句，具体取决于您的测试结果。