Question

我正在设计一个网络应用程序。在某些地方，用户必须输入一个数字。我希望数字输入符合以下条件：

我不想要出现箭头按钮（a.k.a。＆＃34;旋转按钮＆＃34;），因为我认为它们是不必要的混乱。
我希望数字键盘能够在没有物理键盘的任何设备上显示，或者至少在最近的iOS和Android设备上显示。普通的文本键盘充满了不必要的混乱。
我不希望在最新版本的Firefox（红色边框，工具提示）中内置数字输入的验证行为。我打算使用我自己的验证，或者没有它。
我宁愿避免任何特定于浏览器的黑客攻击。

这就是我尝试过的，以及为什么我的尝试令人失望：

首先，我尝试使用<input type="number">。箭头按钮出现在我的Mac上的Firefox中。我设法通过在行input的输入上设置this.setCustomValidity(" ")事件处理程序来禁用Firefox的验证。
接下来，我尝试做一些研究，发现this question。它提到了一堆看起来只适用于Webkit的东西。我实际上没有尝试过。
接下来，我尝试使用文本输入（<input type="text">），pattern属性设置为[0-9*]。根据{{3}}，这应该会使数字键盘出现。它在iOS中做到了，但在Android中没有。

我知道用于此目的的this answer，但它似乎根本不受支持。

有谁知道实现理智的跨浏览器号码输入的方法？我要求的是不合理的吗？

Answer 1

我遇到了同样的问题，但经过大量的试验和错误后发现了一个非常简单的解决方法：live demo。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
<style>
input[type="tel"]:invalid {
    box-shadow: none; /* 0 doesn't work */
}
</style>
</head>
<body>
    <form novalidate>
        <input type="tel">
    </form>
</body>
</html>

。
（只有）一个不完美之处：在机器人上，它会拉动电话号码键盘而不是普通的数字键盘。但这几乎是相同的，我认为很多用户都不会注意到。

novalidate（其中novalidate="novalidate"也是有效的语法）加上CSS声明似乎是多余的，但是在表单行为方面，浏览器世界中有很多事情发生，具有重要意义interbrowser和intrabrowser不一致。例如，看看here。

显然，W3C尚未对此行为进行标准化。因此，我会选择冗余而不是冒险。

使用数字键盘输入跨浏览器号码，但没有箭头按钮

1 个答案: