需要为移动网站提供一致的 TimePicker gizmo

发布于 2024-12-07 08:37:51 字数 475 浏览 1 评论 0原文

我们有一个移动网站,要求用户输入特定的时间值——基本上采用 hh:mm 形式。我们在不同浏览器显示和输入时间的一致性方面遇到了很大的困难。

在寻找现有示例时,我们不断遇到各种允许分钟为“大致公园”值的网站 - 因此对于他们来说,具有 15 分钟(例如)增量的下拉列表是可以的 - 但具有 60 个值的下拉列表在任何情况下都是荒谬的平台,尤其是移动平台。

HTML5 <输入类型=“时间”/>并没有让我们到达那里。标准文本输入也不是,因为它往往会提示设备显示字母键盘,而该键盘上没有数字。 HTML5 type="number" 几乎可以工作,但对于某些 Android 浏览器来说,数字键盘上没有冒号 (:)。

我很清楚我们正处于移动浏览器混乱的境地,但有谁知道什么可以同时适用于 Android 和 iPhone?

注意:我尝试过谷歌搜索,并检查了各种 jQuery 插件,但没有一个为移动设备提供良好的用户体验,而且许多插件甚至对于桌面也很差。有想法吗?

We have a mobile web site that requires users to enter a specific time value--basically in hh:mm form. We're having a great deal of difficulty with the consistency of displaying and entering time from various browsers.

In looking for existing examples, we keep encountering various sites that allow 'ball park' values for minutes--so for them, a dropdown with 15 minute (for example) increments is fine--but a dropdown with 60 values is ridiculous on any platform, mobile especially.

The HTML5 < input type="time" /> isn't getting us there. A standard text input isn't either, as it tends to cue the device to show the alpha keyboard, which doesn't have numbers on it. The HTML5 type="number" almost works, but for some Android browsers, which don't have the colon (:) on the numeric keyboard.

I'm well aware that we're in the land of chaos with mobile browsers, but does anyone have a good idea of what might function well for both Android and iPhone?

Note: I've tried googling, and checked out various jQuery plugins, and none provide a good user experience for mobile--and many are poor even for the desktop. Ideas?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

铃予 2024-12-14 08:37:51

我不太喜欢他们的方法,但我相信 Any+Time 日期/时间选择器会起作用在移动设备上相当好 - 它可以静态定位,并且宽高比和按钮尺寸看起来很合适。

也就是说,在我的 iPhone 上进行测试表明,有一些问题需要解决。值得注意的是,点击选择器小部件中的按钮后,选择器填充的“隐藏”输入字段将获得焦点,视图会四处移动,并且屏幕键盘会弹出。

I don't particularly like their approach, but I believe the Any+Time date/time picker would work reasonably well on a mobile device - it can be positioned statically and the aspect ratio and button sizes look Right.

That said, testing it on my iPhone shows that a few kinks need to be ironed out. Notably, after tapping a button in the picker widget, the "hidden" input field the picker populates is focused and the view moves around and the onscreen keyboard pops up.

倾城月光淡如水﹏ 2024-12-14 08:37:51

我讨厌在这里回答我自己的问题,但看起来 Mobiscroll 最接近为我们的用户解决问题。我们还查看了 jQM-DateBox 但感觉当您向前滚动超过 59 或向后滚动超过 0 时,我们的用户会对小时值自动更改感到不舒服。

除此之外,我们确实在标准下拉列表上使用 jQuery Mobile 选择列表进行了评估,但它我们使用它时感觉错误,因为它本质上是在页面上弹出一个 div,并且滚动它会移动整个页面相当多的距离。我认为这对于某些项目来说非常有用,但不适用于我们的用户群。

I hate answering my own questions here, but it looks like Mobiscroll comes closest to solving the problem for our users. We also looked at the jQM-DateBox but felt that our users would not be comfortable with the hour value changing automatically when you roll forward past 59, or backward past 0.

In addition to this, we did evaluate using a jQuery Mobile select list on a standard dropdownlist, but it felt wrong as we used it, as it essentially pops a div on the page, and scrolling through that moves the entire page quite a bit. I think that one would be great for a few items, but not applicable to our user base.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文