Javascript 带数字键盘但不带箭头按钮的跨浏览器数字输入
我正在设计一个网络应用程序。在某些地方，用户必须输入一位数字。我希望数字的输入符合以下标准： 我不想让箭头按钮也就是旋转按钮出现，因为我认为它们是不必要的杂乱。 我希望数字键盘能在任何没有物理键盘的设备上显示，或者至少在最近的iOS和Android设备上显示。普通的文本键盘充满了不必要的混乱。 我不希望在最新版本的Firefox红色边框工具提示中内置数字输入的验证行为。我计划使用我自己的验证，或者不使用它。 我宁愿避免任何特定于浏览器的黑客攻击。 这就是我所尝试的，也是我的尝试令人失望的原因： 首先，我试着使用。箭头按钮出现在我Mac上的Firefox中。我通过使用this.setCustomValidity行在输入上设置输入事件处理程序来禁用Firefox的验证。 接下来，我试着做了一些研究，发现。它提到了一大堆看起来只能在Webkit上使用的东西。我实际上没有试过。 接下来，我尝试使用pattern属性设置为[0-9*]的文本输入。根据，这应该会使数字键盘出现。它在iOS中做到了这一点，但在Android中却没有。 我知道这是为了这个目的，但它似乎没有得到任何支持Javascript 带数字键盘但不带箭头按钮的跨浏览器数字输入,javascript,html,css,mobile,touch,Javascript,Html,Css,Mobile,Touch,我正在设计一个网络应用程序。在某些地方，用户必须输入一位数字。我希望数字的输入符合以下标准： 我不想让箭头按钮也就是旋转按钮出现，因为我认为它们是不必要的杂乱。 我希望数字键盘能在任何没有物理键盘的设备上显示，或者至少在最近的iOS和Android设备上显示。普通的文本键盘充满了不必要的混乱。 我不希望在最新版本的Firefox红色边框工具提示中内置数字输入的验证行为。我计划使用我自己的验证，或者不使用它。 我宁愿避免任何特定于浏览器的黑客攻击。 这就是我所尝试的，也是我的尝试令人失望的原因：
有人知道一种实现跨浏览器数字输入的方法吗？我所要求的是不合理的吗？我也有同样的问题，但经过多次尝试和错误后，发现了一个非常简单的解决方法： 守则：
<!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>
显然，W3C尚未对这种行为进行标准化。因此，我会选择裁员而不是冒险 制作一个包含10个按钮的简单gui，不要使用这些浏览器/平台特定的功能。这可能比所有研究更容易实现，它有10个按钮，并且绑定到键盘的数字输入。10分钟的编码。10分钟的样式设计。这对于一个应用程序来说是不是意味着它要按照JavaScript编程的方式工作，这样你就不必关心当JavaScript被禁用时会发生什么。在这种情况下，您可以使用contenteditable=true的span。我正在考虑制作自己的按钮。我想知道是否有更简单的方法，但如果没有，我可能会这样做。@JukkaK.Korpela，我用span尝试了你的想法，常规文本键盘出现了。我正试图获得数字输入的特殊键盘，带有数字按钮和其他功能。@EliasZamaria，当点击/点击跨度时，您可以使一个由数字按钮以某种方式排列的模式对话框出现。无可否认，这与本机数字键盘不同，但实际上可能更好，因为你可以让它只包含10位数字。我更喜欢数字键盘而不是电话号码键盘，但这是我能做的最好的。我有一个问题：你需要输入[type=tel]：无效规则还是novalidate属性？我没有注意到任何浏览器中的电话号码输入有任何验证。@EliasZamaria:是和否。在试错过程中，我注意到了与您相同的情况：在Firefox中，错误输入的周围有一个红色边框，即红色框影。但我不记得当时我在测试什么类型的输入。尽管如此，由于W3C表单行为规范缺乏和/或实施不善，我会像我写的那样，选择冗余而不是冒险。毕竟，渲染时间差只有3纳秒，这有助于避免将来不得不修改代码。