为Mobile Safari(webkit)重新创建HTML5范围输入？

Question

所以我一直致力于HTML5 iPad应用程序的工作,并遇到了一个问题.我第一次使用这个应用程序并依靠桌面Safari来快速获取我的应用程序(可能不是最好的东西,无论如何......),我无法访问iPad

我不得不依赖于接口的一部分输入范围.看到HTML5有一个范围输入后,我很高兴,因为这正是我需要的.我甚至设法将其设计为完全符合设计的样式:

这很棒!...直到我真的在iPad上尝试它并且它不起作用.只显示文本输入.我现在想知道该做什么......我确实需要一个滑块,当拖动时它会吐出数据.显然需要与触摸一起工作.在浏览了整个网络后,似乎没有一个可靠的解决方案.

你们在这里建议什么？编写一个工作触摸友好滑块的正确方法是什么,就像它不支持的原生HTML5一样!？

任何想法/想法/知识/经验将不胜感激!詹姆士

Answer 1

我测试了所有的提议的 " 解决方案 ",发现它们都缺乏.
一切都过于臃肿,一些改变现有的标记或强制不必要的CSS样式.

所以我用2kb的JavaScript(缩小版)制作了我自己的解决方案.

试试(在您的移动设备上): https: //range-touch.herokuapp.com

代码:https://github.com/dwyl/range-touch(简洁,评论)

要在您自己的项目中使用它,您需要做的就是在页面/模板中包含
range-touch.min.js文件.

神奇地 <input type="range">适用于所有移动设备.

您可以根据自己的喜好设置滑块和按钮的样式.
我在可选的/style.css中包含了样本样式

注意:此解决方案假设您有JQuery 或Zepto.js

Answer 2

我也有同样的问题，只是用的是 iPhone。

这是因为 Mobile Safari 仅支持 HTML5 的一个子集。我正在使用 JqTouch，它给我带来了各种各样的问题，所以请避免使用这个框架。

看看jquery mobile。目前是 Alpha 3，但有一个适用于 iOS 的滑块控件。

希望这对您有一点帮助。