android html5 输入数字键盘,关于html：如何在Android手机网站中强制数字键盘

最新推荐文章于 2021-06-08 14:22:14 发布

只有橘子

最新推荐文章于 2021-06-08 14:22:14 发布

阅读量419

点赞数

文章标签： android html5 输入数字键盘

我有一个移动网站，其中有一些HTML input元素，如下所示：

我已经将该网站嵌入到WebView中，以供可能使用Android 2.1使用，因此它也将是一个Android应用程序。

当此HTML input元素聚焦时，是否可以用数字键盘代替默认的带字母键盘？

或者，如果对于HTML元素不可行，是否可以为整个应用程序设置它(可能是清单文件中的内容)？

如果除了Android之外，还希望在iOS上使用数字键盘，则应执行以下操作：stackoverflow.com/a/31619311/806956

当输入获得焦点时，这两个按钮都会显示数字小键盘。

显示带有额外搜索按钮的普通键盘

其他一切似乎都带来了标准键盘。

今天来看一下，然后告诉您是否可行。谢谢你，理查德！

嗨，理查德。无效，输入字段仍在打开标准键盘。

HTML规范的input type s列表，包括number和tel。

请注意，type="tel"的键盘在键入数字时比type="number"的键盘差。

也会调出数字键盘，但只能在iOS上，而不能在Android上。

重要的提示

我将其发布为答案，而不是评论，因为它是非常重要的信息，它将以这种格式吸引更多的关注。

就像其他人指出的那样，您可以强制设备向您显示带有type="number" / type="tel"的数字??键盘，但是我必须强调，您对此必须非常谨慎。

如果某人期望一个以零开头的数字(例如000222)，那么她可能会遇到麻烦，因为某些浏览器(例如台式机Chrome)将发送到服务器222，而这并不是她想要的。

关于type="tel"我不能说类似的话，但我个人不使用它，因为它在不同电话上的行为可能会有所不同。我将自己局限于简单的pattern="[0-9]*"，该pattern="[0-9]*"在Android中不起作用

type="tel"可能不会自动格式化。规范指出，与number不同，tel并没有强制执行任何特定的语法，后者要求其值必须是有效的浮点数。

有多糟我们试图为我们的移动客户加快表单处理的速度，这似乎是一个显而易见的解决方案，但我们还需要可靠的东西。您发布了强烈反对使用此方法的警告。我想知道您是否可以对此进行详细说明？

@Philll_t，用户需要发送000222数据，但是在服务器端，您将获得222。您没有看到功能被完全破坏吗？服务器获取错误的数据。

是的，我明白您的意思，但我的意思是：有多少百分比的用户看到此内容？在Safari和Chrome等主要的移动浏览器上是否有此问题？您怎么知道这是一个问题，是否可以提供链接。我相信你，我只是想研究自己，还没有发现任何暗示这一点的方法，也许您可??以为我指明正确的方向。我们只是想看看我们的客户群是否将从中受益。

感谢您的来信。干得好。

@Philll_t我认为此警告的最佳示例是"出生日期"输入字段。您需要手动输入日期，月份和年份的地方。是的，仍然有很多网站使用这种样式而不是常用的日期选择器。关于"出生日期"输入字段的问题，是当您输入以" 0"开头的日期或月份时，例如08。

type=number似乎是一个很好的解决方案，但当使用台式机浏览器在输入字段中显示上下箭头时，则不是这样。幸运的是，我们现在可以使用CSS隐藏这些箭头：stackoverflow.com/a/22306944/1066234-PS：然后您使用type=number stackoverflow.com/q/35315157/1066234遇到了下一个问题

这应该工作。但是我在Android手机上也有同样的问题。

我发现，如果不包括jquerymobile-framework，那么键盘会在两种类型的字段上正确显示。

但是，如果您确实需要使用jquerymobile，我还没有找到解决该问题的解决方案。 strike>

更新：

我发现，如果表单标签存储在

数字键盘未显示。这一定是个错误...

感谢您对此进行深入研究。我不确定我是否明白："如果表单标签存储在div [data-role = page]之外"。在我的情况下，问题很好地嵌套在div [data-role = page]中。也许问题在于这些页面在我看来是作为对话框显示的？

当输入类型为"数字"时，某些浏览器会向服务器发送前导零。因此，我混合使用jquery和html来加载数字键盘，并确保该值以文本形式而不是数字形式发送：

$(document).ready(function(){

$(".numberonly").focus(function(){$(this).attr("type","number")});

$(".numberonly").blur(function(){$(this).attr("type","text")});

})