电话:用于文本输入的数字键盘

Question

有没有办法强制数字键盘出现在手机上<input type="text">？我刚刚意识到<input type="number">在HTML5中是针对"浮点数",因此它不适用于信用卡号,邮政编码等.

我想模拟数字键盘功能<input type="number">,对于采用浮点数以外的数值的输入.也许还有另一种合适的input类型吗？

Answer 1

你可以做到<input type="text" pattern="\d*">.这将导致出现数字键盘.

<form>
  <input type="text" pattern="\d*">
  <button type="submit">Submit</button>
</form>

如果您只想要数字键盘但不想验证(例如在Chrome中),则可以在表单上添加novalidate属性.<form ... novalidate> (20认同)
<input type ="text"pattern ="\ d*">在android上不起作用？我在ios上测试并且成功地工作但是没有在android上工作.我该怎么解决呢 (13认同)
只要您需要数字值,此功能就可以使用.需要'.'的浮点数.(或某些地区的',')因键盘不包含这些字符而无法输入. (10认同)
我发现`\ d*`不起作用,需要`[0-9]`.请注意,这将适用于`type ='numeric'.这是基于邮政编码的链接文档参考建议的. (3认同)
如果我需要使用.(点),我该如何使用它？这个模式只显示[0-9] (2认同)

Answer 2

截至2015年中期,我相信这是最好的解决方案:

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

这将为您提供Android和iOS上的数字键盘:

它还通过向上/向下箭头按钮和键盘友好的向上/向下箭头键递增来为您提供预期的桌面行为:

在此代码段中尝试:

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

通过二者结合起来type="number",并pattern="[0-9]*,我们得到的作品无处不在的解决方案.并且,它向前兼容未来的HTML 5.1提议的inputmode属性.

注意:使用模式将触发浏览器的本机表单验证.您可以使用该novalidate属性禁用此功能,也可以使用该属性自定义错误验证的错误消息title.

如果您需要输入前导零,逗号或字母(例如国际邮政编码),请查看此轻微变体.

学分和进一步阅读:

HTML5 `type="number"` [spec](https://html.spec.whatwg.org/multipage/forms.html#number-state-(type=number)) 表示 *以下内容属性不得为指定但不适用于元素：... inputmode* (2认同)
@Tgr啊,好抓.似乎规范要求人们使用`<input type ="text"inputmode ="numeric">`并且它希望移动浏览器查看`inputmode`以确定它是否显示小键盘或全键盘.由于没有浏览器支持`inputmode`,我不确定它将如何在桌面与移动浏览器上实现.例如:桌面浏览器是否允许在"<input type ="text"inputmode ="numeric">`中输入字母？如果是这样,那就是一个问题.`<input type ="number">`阻止这个,只允许数字.也许我们必须等到浏览器开始实现它,然后我们才能更新这个答案. (2认同)
对'type =“ number”`的支持是[体面]（http://caniuse.com/#feat=input-number），但它可能会显示一个微调框，对于信用卡号等意义不大。 (2认同)
有类型="数字"是屁股X的痛苦(.如果输入无效,你将无法获得JS中输入的值,你无法获得光标位置等. (2认同)
`当type属性的值为text,search,tel,url,email或password时,此属性适用,否则将被忽略. (2认同)

Answer 3

我发现,至少对于类似"密码"的字段,做一些像<input type="tel" />最终生成最真实的数字导向字段的东西,它也有没有自动配置的好处.例如,在我最近为希尔顿开发的移动应用程序中,我最终选择了这个:

具有输入标签的iPhone Web应用程序显示器具有TEL类型,其生成非常体面的数字键盘,与类型编号相反,该编号是自动编码的并且具有稍微不那么直观的输入配置

......我的客户印象非常深刻.

<form>
  <input type="tel" />
  <button type="submit">Submit</button>
</form>

对我来说问题不是自动格式化,而是验证.输入类型`number`强制许多浏览器中的数字严格规则.如果用户添加空格(或逗号)来分隔数千,则不会从输入中获得任何值.是的,即使在JavaScript中,`input.value`也是空的."tel"类型的输入不限于特定格式,因此用户仍然可以输入任何内容,验证是一个单独的过程(供开发人员处理). (4认同)

Answer 4

<input type="text" inputmode="numeric">

使用Inputmode，您可以向浏览器提供提示。

Answer 5

截至 2020 年

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

Answer 6

使用type="email"或type="url"至少会在某些手机上给你一个键盘,比如iPhone.对于电话号码,您可以使用type="tel".

Answer 7

使用它<input type="text" pattern="\d*">来调出数字键盘存在危险.在firefox和chrome上,模式中包含的正则表达式会导致浏览器验证该表达式的输入.如果与模式不匹配或留空,则会发生错误.请注意其他浏览器中的意外操作.

Answer 8

您可以使用inputmodehtml 属性：

<input type="text" inputmode="numeric" />

有关更多详细信息，请查看有关 inputmode的MDN 文档。