使用数字键盘但没有箭头按钮的跨浏览器数字输入
Posted
技术标签:
【中文标题】使用数字键盘但没有箭头按钮的跨浏览器数字输入【英文标题】：Cross-browser number input with number keyboard, but without arrow buttons 【发布时间】：2014-08-22 20:27:46 【问题描述】：我正在设计一个网络应用程序。在某些地方，用户必须输入一个数字。我希望数字的输入满足以下条件：
-
我不希望箭头按钮（也称为“旋转按钮”）出现，因为我认为它们是不必要的混乱。
我希望数字键盘显示在任何没有物理键盘的设备上，或者至少在最近的 ios 和 android 设备上显示。普通的文本键盘充满了不必要的混乱。
我不希望最新版本的 Firefox 中内置的数字输入的验证行为（红色边框，工具提示）。我打算使用我自己的验证，或者不使用它。
我希望避免任何特定于浏览器的黑客攻击。
这就是我尝试的方法以及为什么我的尝试令人失望：
首先，我尝试使用<input type="number">。箭头按钮出现在我 Mac 上的 Firefox 中。我通过this.setCustomValidity(" ") 行在输入上设置input 事件处理程序，设法禁用了Firefox 的验证。
接下来，我尝试做一些研究，发现this question。它提到了一堆看起来只能在 Webkit 上运行的东西。我实际上并没有尝试过。
接下来，我尝试使用将pattern 属性设置为[0-9*] 的文本输入(<input type="text">)。根据this answer，应该会出现数字键盘。它在 iOS 中做到了这一点，但在 Android 中却没有。
我知道inputmode attribute 是为此目的，但似乎根本不受支持。
有没有人知道一种实现合理的跨浏览器号码输入的方法？我的要求不合理吗？
【问题讨论】：
用 10 个按钮制作一个简单的 gui，不要使用任何这些浏览器/平台特定的“功能”（它可能比所有研究更容易实现，它有 10 个按钮，还有一个绑定到键盘的数字输入。10 分钟的编码。10 分钟的样式。） 这是否适用于 应用程序，因为它旨在按照 javascript 中的编程方式工作，因此您无需关心禁用 JavaScript 时会发生什么。在这种情况下，您可以只使用span 和 contenteditable=true。
我正在考虑制作自己的按钮。我想知道是否有更简单的方法，但如果没有，我可能会这样做。
@JukkaK.Korpela，我用 span 尝试了你的想法，然后出现了常规文本键盘。我正在尝试获得用于数字输入的特殊键盘，带有数字按钮和其他东西。
@EliasZamaria，当span 被点击/点击时，您可以制作一个模态对话框（由以某种方式排列的数字按钮组成）。这无疑会偏离原生数字键盘（但实际上可能会更好，因为你可以让它只包含十位数字）。
【参考方案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>
. 有（只是）一个缺陷：在 Android 上，它会拉起电话号码键盘而不是普通的数字键盘。但是这些几乎是相同的，我认为很多用户不会注意到。
novalidate（novalidate="novalidate" 也是有效的语法）加上 CSS 声明似乎是多余的，但在浏览器世界中，当涉及到表单行为时，会发生很多事情，存在显着的浏览器间和浏览器内不一致.例如，看看here。
显然，这种行为还没有被 W3C 标准化。因此，我会选择冗余而不是冒险。
【讨论】：
我最终做了类似的事情。我会更喜欢数字键盘而不是电话号码键盘，但这是我能做的最好的 IMO。我有一个问题：您需要input[type="tel"]:invalid 规则还是novalidate 属性？我没有注意到任何浏览器中的电话号码输入有任何验证。
@EliasZamaria：是也不是。在试错过程中，我注意到和你一样：在 Firefox 中，红色边框，即红色框阴影，围绕输入错误填写。但我不记得当时我在测试什么类型的输入。尽管如此，由于 W3C 表单行为规范稀缺和/或实施不善，我会，就像我写的那样，选择冗余而不是冒险。毕竟只是3纳秒的渲染时间差，有助于避免以后修改代码。以上是关于使用数字键盘但没有箭头按钮的跨浏览器数字输入的主要内容，如果未能解决你的问题，请参考以下文章
可用于 Web 应用程序的跨浏览器和跨操作系统安全键盘快捷键是啥？
手机浏览器访问页面时，点击输入框如何自动切换到数字键盘，请大侠们指教
是否有一个轻量级的跨浏览器范围输入解决方案，不需要像 jQuery 这样的库