iOS / iPhone 键入 "number" 键盘以允许冒号

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 on Force iOS numeric keyboard with custom / currency pattern

回答的微小改编

iOS / iPhone 键入 "number" 键盘以允许冒号

iOS / iPhone type "number" keyboard to allow colon

html

javascript

uikeyboard