Question

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

问题：

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

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

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

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

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

我目前的解决方案是hacky和简单化。基于我已经用于数字验证的类，我根据检测到的操作系统替换应该包含数字的每个文本元素，其中新输入为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元素？

-------------- update

我认为没有办法做我真正想做的事情，即设置一种能够在桌面浏览器和所有主要的基于移动触摸的平台上运行良好的单一输入样式或类型。我决定通过直接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

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

有些用户甚至可能在其移动设备/浏览器上停用了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" />

这有点像黑客，但对你来说是另一种选择。

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

如果您有任何疑问，请与我们联系。我知道这不是直接回答这个问题，但在我看来，这是现在更好的做事方式。：）

编辑：

为每个浏览器解决此问题的一种可能方法是使用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语句，具体取决于您的测试结果。

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

1 个答案: