104

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

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

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

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

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

4

8 回答 8

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

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

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

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

于 2010-11-30T12:33:32.967 回答
53

重要的提示

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

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

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

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

于 2013-01-30T10:09:46.047 回答
20

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

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

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

<input
  inputmode="numeric"
  pattern="[0-9]*"
  type="number"
/>
于 2020-02-23T13:58:29.790 回答
9

这应该有效。但我在安卓手机上也有同样的问题。

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

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

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

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

<div data-role="page">

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

于 2011-01-24T12:33:45.960 回答
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">

于 2017-07-14T17:30:26.953 回答
0

对于带小数点的数字键盘

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

在此处输入图像描述

于 2021-11-23T12:58:11.013 回答
-2

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

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

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

于 2016-06-23T18:11:26.210 回答
-3

input type = number

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

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

这是 iPhone 4 上出现的键盘：

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

HTML5输入类型数字的Android截图

于 2014-11-22T04:18:54.673 回答