你的位置:首页 > 软件开发 > 网页设计 > 移动端H5页面遇到的问题总结

移动端H5页面遇到的问题总结

发布时间:2017-01-20 12:00:07
最近刚做完一个移动端的项目,产品之无敌,过程之艰辛,我就不多说了,记录下在这个项目中遇到的问题,以防万一,虽然这些可能都是已经被N多前辈解决掉了的问题,也放在这里,算是为自己漫漫前端路铺了一颗小石子儿吧,也在文末留下自己未能解决的疑问,希望看到的朋友能解惑。  都知道做移动端的开 ...

  最近刚做完一个移动端的项目,产品之无敌,过程之艰辛,我就不多说了,记录下在这个项目中遇到的问题,以防万一,虽然这些可能都是已经被N多前辈解决掉了的问题,也放在这里,算是为自己漫漫前端路铺了一颗小石子儿吧,也在文末留下自己未能解决的疑问,希望看到的朋友能解惑。

  都知道做移动端的开发,在电脑上调试好了的东西,放在手机里可能真的秒秒钟就炸了,我发誓绝对没想到炸的这么快。。。

  1、IOS监听不到input框输入中文的keyup事件

  这个小标题好像不太明确,大概就是,APP中有一个列表显示的页面,页面上有个搜索功能,使用keyup监听input框,每一次keyup都去检索一下缓存数据有没有符合的数据,然而、然鹅,IOS上并没有能在每一次keyup都去检索,经过各种查发现,IOS的输入法(不管是第三方还是自带)能检测到英文或者数字的keyup,检测不到中文的keyup,(至于标点那些,就没有深究了),在输入中文之后需要点击回退按键,才会开始搜索,我自己能想到的办法就是定时检测setInterval,我也只能想到这办法了,但是总觉得不太好,于是搜索到了这个办法(http://blog.csdn.net/lytlx/article/details/50845259), 把keyup事件换成“input”和“propertychange”事件。

  oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况如下:

 

  移动端H5页面遇到的问题总结

  oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发,有以下几种情况:

  • 修改了 input:checkbox 或者 input:radio 元素的选择中状态, checked 属性发生变化。
  • 修改了 input:text 或者 textarea 元素的值,value 属性发生变化。
  • 修改了 select 元素的选中项,selectedIndex 属性发生变化。

  在监听到 onpropertychange 事件后,可以使用 event 的 propertyName 属性来获取发生变化的属性名称,这样看来,oninput & onpropertychange 似乎是监听输入框值变化的最佳方案。

  原来的代码:

  $(".ui-searchbar-input input").keyup(function () {

原标题:移动端H5页面遇到的问题总结

关键词:H5

H5
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。