1.ios h5 app avalon tap事件失效
使用MUI制作app界面,使用avalon.js渲染数据,发现在(Android上正常)ios上运行时容器div的avalon的ms-on-tap被内容遮住不执行.用MUI的on tap事件可以执行但改动较大,于是改为ms-on-click.(但是click事件有300ms延迟,解决方法在标题2处),搜索到以下解决方法:
 
解决办法有 4 种可供选择:(来自:https://happycoder.net/solve-ios-safari-click-event-bug/)
 
将 click 事件直接绑定到目标元素(即 .target)上
将目标元素换成 <a> 或者 button 等可点击的元素
将 click 事件委托到非 document 或 body 的父级元素上
给目标元素加一条样式规则 cursor: pointer;
推荐后两种。从解决办法来看,推测在 safari 中,不可点击的元素的点击事件不会冒泡到父级元素。通过添加 cursor: pointer 使得元素变成了可点击的了。
 
最终使用第4种方法解决掉.
 
2.click事件的300ms延迟
解决方法如下:(来自:http://www.xiaomeiti.com/note/3585)
 
粗暴型:禁用缩放 
<meta name=”viewport” content=”width=device-width, user-scalable=no”>
 
关键是 user-scalable = no。 这个属于简单粗暴型的,虽然看似完美,但有一个致命的缺陷,当你必须完全禁用缩放来达到目的时候,就傻眼了,只有特定场景下的交互界面,此方案才可行,其它大多数情况,此法都不可行。 另外:<a href="http://www.oicqzone.com/hot/%3Ca%20href=" http:="" www.oicqzone.com="" hot="" chrome_6494_1.html'="" target="_blank" style="color: rgb(37, 110, 177); text-decoration-line: none;"> chrome_6494_1.html' target='_blank'> Chrome 开发团队不久前宣布,在 Chrome 32 这一版中,他们将在包含 width=device-width 或者置为比 viewport 值更小的页面上禁用双击缩放。当然,没有双击缩放就没有 300 毫秒点击延迟。
 
3.从根本解决——input框自动获取焦点
如果没有通过某种用户交互, 手机不会(触发软键盘弹起)。非用户交互的当下触发focus,但设置另一个元素的onClick事件,就能把focus事件带起来。
 
意思就是,用户进入页面后,必须有一次和用户的交互,之后才能自动获取焦点并弹出软键盘。
举个例子:
比如我现在有input框,想让它自动获取焦点,并弹出软键盘,但是不能一进页面就让他获取焦点,这种行不通,因为没有用户交互,但是如果说,这个input框开始的时候是隐藏的,我点击其他地方,让input框显示,并且使其获取焦点,弹出软键盘,这个方式就是可行的,因为中间存在一次用户交互。
 
实在抱歉,之前误导了很多同学,在此对大家伙说一声抱歉。
下面的解决方案在我们项目里可以用,也是因为上面的原因。
 
      在做项目的过程中,需求文档有个要求是,当进入页面后,第一个行input框要自动获取焦点,并弹出数字软键盘。
           个人认为这个问题,大家做移动端的时候应该会遇到,今天拿出来说说我们遇到的这个小bug。
 
一个相对很简单的需求,但是值得记录一下,因为在此我们还是遇到了一些hack的。
先说一下上面的这个问题的基础解决方案:
         autofocus 属性   :   文本输入字段被设置为当页面加载时获得焦点
 
         <input type=”tel” autofocus=”autofocus”>  这一行代码其实就够了!
 
但是问题来了、、
 
问题点:
       android 系统
          QQ、uc浏览器,input输入框中需要页面进入即自动弹出数字软键盘,利用input标签属性autofocus=”autofocus”,经真机测试,依然无法弹出软键盘。
 
解决方案:
         1、利用要获得焦点的input框添加一个focus(),此方法在chrome浏览器下无任何问题,但是在QQ、uc浏览器下虽然获取了焦点,但是无法弹出数字软键盘。
 
         2、利用setTimeOut()开一个定时器的方法,但是,android手机参差不齐,性能问题严重,不可控以及容错率太低,所以此方法比较不靠谱,不建议使用。
 
         3、利用trigge()方法,对要获得焦点的input框,调用一次”click”事件,既可解决上述问题。
 
              xxxxxxxx.el.find(‘#c_payment_cardbin_input’).trigger(“click”).focus();
以上就是我们此次项目的解决方案,网上查了一些能很好的解决万恶的Android机兼容性问题。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐