如何在Android移动网站中强制使用数字键盘

Question

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

<input type="text" name="txtAccessoryCost" size="6" />

我已将该网站嵌入到 WebView 用于可能的 Android 2.1 消耗，因此它也将是一个 Android 应用程序。

当此 HTML input 元素获得焦点时，是否可以使用数字键盘而不是默认的字母键盘？

或者，是否可以为整个应用程序设置它（也许是 清单文件），如果它对于 HTML 元素不可行？

Answer 1

<input type="number" />
<input type="tel" />

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

<输入类型=“搜索”/>
显示带有额外搜索按钮的普通键盘

其他所有内容似乎都会显示标准键盘。

Answer 2

重要说明

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

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

如果有人期望一个以零开头的数字，例如 000222，那么她可能会遇到麻烦，因为某些浏览器（桌面 Chrome、实例）将发送到服务器222，这不是她想要的。

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

Answer 3

inputmode 根据 WHATWG 规范 是默认方法。

对于 iOS 设备，添加 pattern 也可能有所帮助。

为了向后兼容，也请使用 type，因为 Chrome 从版本 66 开始使用这些。

<input
  inputmode="numeric"
  pattern="[0-9]*"
  type="number"
/>

Answer 4

这应该有效。但我在 Android 手机上也遇到同样的问题。

<input type="number" /> <input type="tel" />

我发现，如果我不包含 jquerymobile 框架，键盘会在两种类型的字段上正确显示。

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

更新：
我发现，如果表单标签存储在数字键盘之外，

<div data-role="page"> 

则不会显示数字键盘。这一定是一个错误...

Answer 5

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numberonly">

Answer 6

对于带有小数点的数字键盘

<input inputmode="decimal" type="number" />

Answer 7

为数字输入添加步骤属性

<input type="number" step="0.01">

来源：http:// /blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html

Answer 8

input type = number

当您想要提供数字输入时，可以使用 HTML5 input type="number" 属性值。

<input type="number" name="n" />

这是 iPhone 4 上出现的键盘：

iPhone Screenshot of HTML5 input type number
Android 2.2 使用此键盘进行 type=number：

Android Screenshot of HTML5 input type number