Question

如何显示典型的数字键盘，但允许输入“：”为有效？我希望人们可以轻松输入时间，例如“ 01：32.59”等。

当我执行<input type="number">时，会显示正确的键盘，但不允许输入值“：”

如果我使用<input type="text">，则该值有效，但用户必须先单击键盘上的数字图标，这对于输入时间而言并不方便。

预先感谢您的帮助。

Answer 1

您可以将input type time用于需要一段时间的输入

<input type="time" step="1" pattern="[0-9]{2}:[0-9]{2}:[0-9]{2}">

在iOS上，这甚至为您的用户打开一个时间选择器而不是键盘。

Answer 2

不幸的是，type = number输入会自动验证以确保仅输入数字，并且不能绕过该输入，并且正则表达式不能用于其他提交，因此，当iPhone打开带有数字的键盘时，顶部，除实数以外的任何值都不会传递。

不幸的是，type = text无法默认使用html或javascript在iPhone键盘上显示数字。

一种解决方法是在用户输入数据之前设置type = number（这将拉动iOS中的数字键盘），然后在用户输入完数据后切换到type = text等。

我的解决方案是使用：

$('#myInput').on('focus', function() {
  $(this).attr('type', 'number');
});

$('#myInput').on('keydown blur', function() {
  $(this).attr('type', 'text');
});

这是Vizllx对Force iOS numeric keyboard with custom / currency pattern的回答中的一个小改编。

iOS / iPhone类型的“数字”键盘允许冒号

2 个答案: