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

Posted 2023-02-18

【中文标题】如何在 Android 的移动网站中强制使用带有数字的键盘

【英文标题】：How to force keyboard with numbers in mobile website in Android

【发布时间】：2011-03-23 06:59:06

【问题描述】：

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

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

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

当这个 HTML input 元素被聚焦时，是否可以获得带有数字的键盘而不是带有字母的默认键盘？

或者，如果对于 HTML 元素不可行，是否可以为整个应用程序设置它（可能在 the Manifest file 中）？

【问题讨论】：

如果想要在 ios 和 Android 上使用数字键盘，您应该这样做：***.com/a/31619311/806956

inputmode="number" 属性似乎是 2019 年末的正确答案：developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…。发表此评论时投票最高的答案建议type="number"，它有一些自己的陷阱； inputmode 似乎只影响虚拟键盘显示，而不影响输入本身的行为/约束。

【参考方案1】：

对于带小数点

的数字键盘

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

【参考方案2】：

inputmode 根据WHATWG spec 是默认方法。

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

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

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

【讨论】：

谢谢你的回答，我在找decimal，在这里找到了developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…

【参考方案3】：

当输入类型为“数字”时，某些浏览器会向服务器发送前导零。所以我混合使用 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">

【讨论】：

这会导致 Android 版 Chrome 出现烦人的问题。当您点击输入时，键盘不会出现。然后，您必须再次点击文本框，然后键盘才会出现纯数字键盘。我真的希望我们有一个type="digits" 选项，所以我们不必有这些黑客。我的意思是，前导零的数字并不罕见（美国的邮政编码就是一个明显的例子）。

我也面临同样的问题！将字段设置为“type=tel”是目前最好的解决方案。

【参考方案4】：

在数字输入中添加步长属性

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

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

【参考方案5】：

input type = number

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

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

这是 iPhone 4 上的键盘：

HTML5输入类型数字的iPhone截图 Android 2.2 将此键盘用于 type=number：

HTML5输入类型数字的Android截图

【参考方案6】：

重要提示

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

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

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

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

【讨论】：

type="tel" 可能不会自动重新格式化。 The spec 指出 tel 不强制执行任何特定语法，这与 number 不同，后者要求其值为 valid floating-point number。

有多糟糕？我们正在努力为我们的移动客户加快表单流程，这似乎是一个显而易见的解决方案，但我们也想要一些可靠的东西。您发布了强烈警告不要使用此方法。我想知道你是否可以详细说明一下？

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

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

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

【参考方案7】：

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

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

<input type="search" /> 显示带有额外搜索按钮的普通键盘

其他一切似乎都调出了标准键盘。

【讨论】：

今天会看看它，然后会让你知道它是否有效。谢谢你，理查德！

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

The HTML specification’s list of input types，包括number和tel。

请注意，the keyboard for type="tel" is worse 用于键入数字而不是type="number" 的键盘。

<input type="text" pattern="\d*" /> also brings up 数字键盘，但仅限于 iOS，not on Android。

【参考方案8】：

这应该可行。但我在 Android 手机上遇到了同样的问题。

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

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

但是如果你真的需要使用 jquerymobile，我还没有找到解决这个问题的方法。

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

<div data-role="page"> 

未显示数字键盘。这一定是个bug……

【讨论】：

感谢您深入研究。我不确定我是否理解：“如果表单标签存储在 div [data-role=page] 之外”。在我的情况下，问题发生在很好地嵌套在 div [data-role=page] 中的表单上。也许问题是这些页面在我的例子中显示为对话框？