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

Question

我有一个移动网站,里面有一些HTML input元素,如下所示:

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

我已将该网站嵌入到WebView可能的Android 2.1消费中,因此它也将是一个Android应用程序.

当这个HTML input元素聚焦时,是否可以使用数字而不是默认的键盘来获得键盘？

或者,如果HTML元素不可行,是否可以为整个应用程序(可能是Manifest文件中的某些内容)设置它？

Answer 1

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

当输入获得焦点时,这两个都呈现数字小键盘.

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

其他所有东西似乎都带来了标准键盘.

`<input type =“ text” pattern =“ \ d *” />`[也弹出]（http://stackoverflow.com/a/15283380/578288）数字键盘，但仅适用于iOS，[不适用Android]（http://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-inputs-spin-box#comment26774412_15283380）。 (2认同)

Answer 2

重要的提示

我发布这个作为答案,而不是评论,因为它是相当重要的信息,它将以这种格式吸引更多的关注.

正如其他人指出的那样,你可以强制一个设备用type="number"/ 向你显示一个数字键盘type="tel",但我必须强调你必须非常谨慎.

如果有人希望以零开头的数字,例如000222,那么她可能会遇到麻烦,因为有些浏览器(例如桌面Chrome)会发送到服务器222,这不是她想要的.

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

使用`type ="tel"`可能不会发生自动重新格式化.[规范](http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#telephone-state-%28type=tel%29)注意`tel`不强制执行任何特定的语法,不像[`number`](http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type- attribute.html#number-state-%28type = number%29),要求其值为[有效浮点数](http://www.whatwg.org/specs/web-apps/current-work /multipage/common-microsyntaxes.html#valid-floating-point-number). (4认同)

Answer 3

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

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

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

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

感谢您的回答，我一直在寻找“十进制”并在这里找到它 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode (2认同)

Answer 4

这应该工作.但我在Android手机上遇到同样的问题.

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

我发现,如果我没有包含jquerymobile框架,那么键盘在两种类型的字段上都能正确显示.

~~但是,如果你真的需要使用jquerymobile,我找不到解决这个问题的解决方案.~~

更新: 我发现,如果表单标签存储在

<div data-role="page">

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