移动端填坑

一个移动端页面,简单的展示和输入功能,时间又是压得很紧(其实每次都是这样-_-!)。原以为有了上次的经验,会很快搞定。但事与愿违,还是踩到了几个坑。

1.iscroll中input:text触发
iscroll中的input:text元素,不能直接触发。可通过在Tap事件中触发focus事件,模拟用户操作。
但在IOS中Safari下,非用户主动触发的focus事件,是不能调起输入法的。表现为需要点击两次,第一次获取焦点,第二次调起输入法。
根本原因在于Safari中keyboardDisplayRequiresUserAction属性的默认配置,没有什么好的解决方案。而网上的方案,大都是通过遍历页面,绕过iscroll对input元素浏览器默认事件的屏蔽,以允许用户触发focus事件。
其他还有“光标移位”、“文本框被遮盖”等,是由于transform造成,就不一一列举了。切记iscroll并不适用于所有情况,要选择合适的场景使用。

2.浏览器对input:datetime和input:datetime-local支持不足
需求中要输入日期和时间,且对于展示格式有要求。原本计划使用HTML5中的标准标签,可惜浏览器太支持太差。对于input:date的支持倒是相对较好,可以不满足输入时间的要求。并且,这些元素都不能满足对于展示格式的要求。
无奈只能使用第三方方案。找来找去发现了一家mobiscroll,效果可以用惊艳来形容。但问题是,他是收费的,只有15天的试用期。好在这家公司良心大大的,提供了一个单一功能的开源版本,用着还不错。

3.浏览器对input:file调用媒体设备的支持不一致
需求中要求直接调用摄像头拍照或选择文件上传照片。好在目前这个支持都还可以,只是有些属性不同的设备解析不同。multiple属性会造成IOS下无法调用摄像头,capture=”camera”属性会造成MIUI7下无法选择文件。最兼容的使用方式是,只设置accept=”image/*”属性。
文件上传的方式,可参考mozilla开发者中心。使用File对象访问文件信息,使用window.URL.createObjectURL方法预览图片,使用FormData对象配合XMLHttpRequest对象实现文件的异步上传。好在这些特性移动端支持的还不错,统一标准万岁!

参考链接:
Mobile Safari Autofocus text field
keyboardDisplayRequiresUserAction
HTML Media Capture
如何在web应用程序中使用文件
H5拍照应用开发经历的那些坑儿

发表评论

电子邮件地址不会被公开。 必填项已用*标注