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

Is there an acceptable cross-platform method for displaying a numeric keypad in standard web forms on a touch-based device?

本文关键字：标准 表单 键盘 数字 显示 Web 触摸 方法 跨平台 可接受 于触摸      更新时间：2023-09-26

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

问题：

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

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

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

type=tel ：这几乎适用于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;
        }
    });
}

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

有些用户甚至可能在他们的移动设备/浏览器上禁用了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语句，具体取决于测试结果。

相关文章：