javascript - bootstrap - 如何复制 Iphone "Scroll Wheel"？

Question

我不知道滚轮是否适合我想要的名称，但我会尝试解释它。

在我的手机上有我可以点击的文本框。单击该框后，您会看到一个可滚动的元素列表，例如数字 1-10。

当您选择数字 1-10 时，要么将该值放入文本框中并关闭 ListView ，要么您可以“提交”该选择。

是否可以在 bootstrap 中复制这个滚动的预设值列表？理想情况下，我希望有一个可供最终用户在手机上滚动浏览并做出决定的时间列表(1:00-1:30、1:30-2:00)。

Answer 1

问题的答案

就像其他人在评论中提到的那样，这就是 iOS 呈现的方式 <select>元素。不同的浏览器会以不同的方式呈现它，即 Android 浏览器会提供一个稍微更传统的列表，而桌面浏览器会将其呈现为标准的下拉列表(尽管样式适合他们的 UI，这可能会令人沮丧)。

其他需要注意的事项

请记住，如果您尝试使用类似 Chosen 的插件覆盖默认选择元素您将丢失这些元素的各种浏览器默认呈现，这可能是一件令人头疼的事情。目前也没有简单的方法来检测您的浏览器是否会以特殊方式(例如 iOS 样式微调器)呈现选择或使用下拉列表，因此您不能使用类似 Modernizr 的东西。仅在您不使用 iOS/Android 时应用您选择的插件。如果你想这样做，你就进入了用户代理嗅探的阴暗世界。 (如果有人想就此纠正我，请纠正我!)

进一步阅读

顺便说一句，请务必查看新的 HTML5 input types .这些提供诸如不需要插件(如果浏览器支持)的 native 日期选择器之类的东西，以及许多其他具有不同程度有用性的类型。例如，type="tel" input 是一个不错的输入法，它会在大多数桌面浏览器中呈现一个普通的文本框，但在大多数带有虚拟键盘的手机/平板电脑/设备上，它会调出一个拨号盘式键盘，使用户更容易输入电话号码，并向他们明确说明您想要什么。如果您正在为移动和桌面制作表单，那么这是非常值得考虑的事情，因为它可以使移动体验更加流畅。不支持这些元素的浏览器将继续像往常一样呈现，这非常好。您还可以使用 Modernizr 之类的工具来检测这些输入类型中的任何一种是否对您可用，并以不同的方式进行操作。例如，我们使用 Modernizr 来检测是否有可用的 native 日期选择器，如果有，我们就保留我们的 <input type="datepicker/>。单独，但如果没有数据选择器，我们会在 jQuery 日期选择器中加载，因此确保每个人都有一个日期选择器。

这对你们中的一些人来说可能是显而易见的事情，但由于这个问题在评论中已经得到了相当多的回答，我认为包含一些关于输入类型和不同浏览器呈现的额外信息会很有用。如果有人想扩展我的答案或更正任何内容(我将是第一个承认自己不是这些事情的完整专家)的人，请随意。