强制使用数字键盘，但允许标点符号:HTML5，移动Safari [英] Force a numeric keyboard but allow punctuation: HTML5, mobile Safari

问题描述

我正在构建一个HTML页面，以便在移动Safari [和其他平台]中查看.该页面允许用户指定几个开始和结束时间.他们必须至少输入两次，根据情况可能更多.

I'm building an HTML page to be viewed in mobile Safari [and other platforms]. The page lets the user specify several start and end times. They have to input at least two times, and possibly more depending on their situation.

我希望用户能够使用数字SHIFT模式键盘将其时间输入为数字和标点符号，即用户将看到如下所示的字段:

I want the user to be able to input their times as numbers and punctuation using the numeric-SHIFT mode keyboard, i.e. the user will see fields like this:

当他们专注于该字段时，他们将获得数字SHIFT键盘:

And they'll get the numeric-SHIFT keyboard when they focus into the field:

不起作用:

<input type="time">(和相关的日期时间类型)不是选项.从HCI角度看，滚轮是不可接受的，尤其是对于重复输入的情况.

<input type="time"> (and related datetime types) is not an option. The scrolly-wheel is unacceptable from an HCI perspective, particularly for repeated entries.

<input type="number">首先要做正确的事情.它以数字SHIFT模式(即数字&键盘)触发键盘.标点符号部分默认情况下可见.但是，当您退出该字段时，移动Safari会删除标点符号(即冒号).我尝试使用novalidate关闭表单中的验证，但这没有用.

<input type="number"> does the right thing at first. It triggers the keyboard in numeric-SHIFT mode, i.e. the numeric & punctuation portions are visible by default. But when you exit the field, mobile Safari strips out punctuation (i.e. the colon). I tried turning off validation in the form using novalidate but that didn't work.

<input type="text" pattern="[0-9]*">触发电话键盘，无法输入冒号.

<input type="text" pattern="[0-9]*"> triggers the telephone keyboard with no way to enter the colon character.

在PATTERN属性中，我可能只需要一个不同的RegExp，但是我尝试过的每个RegExp都会触发普通的Alpha键盘，并且用户必须按下一个键才能进入数字SHIFT键盘.

I may just need a different RegExp in the PATTERN attribute, but each one I've tried triggers the normal alpha keyboard, and the user has to hit a key to get to the numeric-SHIFT keypad.

有人可以告诉我如何在不触发用户输入严格的验证规则的情况下将键盘强制转换为数字SHIFT显示吗?

Can anyone tell me how to force the keyboard into numeric-SHIFT display without triggering harsh validation rules on the user's input?

推荐答案

看看jQuery Mobile DateBox. 此处.您可能需要重新考虑此处的文本输入.也许您想和一个选择器一起去. Sencha Touch也有一个DatePicker.我写了一个实现时间选择器对象的扩展.如果需要的话，我会把它放在GitHub上.

Take a look at jQuery Mobile DateBox. here. Its possible you might want to rethink text input here. Maybe you want to go with a picker. Sencha Touch also has a DatePicker. I wrote an extension that implements a timepicker object. I'll throw it up on GitHub if you need me to.

这篇关于强制使用数字键盘，但允许标点符号:HTML5，移动Safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！