我正在设计一个网络应用程序。在某些地方，用户必须输入一个数字。我希望数字的输入满足以下条件:
- 我不希望出现箭头按钮(又名“旋转按钮”)，因为我认为它们是不必要的困惑。
- 我希望数字键盘显示在任何没有物理键盘的设备上，或者至少在最近的 iOS 和 Android 设备上。普通的文本键盘充满了不必要的困惑。
- 我不想要最新版本的 Firefox 中内置的数字输入验证行为(红色边框，工具提示)。我打算使用我自己的验证，或者不使用它。
- 我宁愿避免任何特定于浏览器的黑客攻击。
这就是我的尝试以及我的尝试令人失望的原因:
- 首先，我尝试使用
<input type="number">.箭头按钮出现在我 Mac 上的 Firefox 中。我设法通过设置input来禁用 Firefox 的验证。输入上的事件处理程序，行this.setCustomValidity(" "). - 接下来，我尝试做一些研究并找到了 this question .它提到了一堆看起来只能在 Webkit 上工作的东西。我实际上并没有尝试过。
- 接下来，我尝试将文本输入 (
<input type="text">) 与pattern结合使用属性设置为[0-9*].根据this answer ，这应该会使数字键盘出现。它在 iOS 中做到了这一点，但在 Android 中却没有。
我知道 inputmode attribute这是为了这个目的，但它似乎根本不受支持。
有谁知道实现合理的跨浏览器数字输入的方法吗？我的要求不合理吗？
最佳答案
我遇到了同样的问题，但经过大量的反复试验发现了一个非常简单的解决方法: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 尚未对这种行为进行标准化。因此，我会选择裁员而不是冒险。
关于javascript - 使用数字键盘但没有箭头按钮的跨浏览器数字输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24524482/