iscroll(4)的解决方案
博客专区 > PorcoMar 的博客 > 博客详情
iscroll(4)的解决方案
PorcoMar 发表于11个月前
iscroll(4)的解决方案
  • 发表于 11个月前
  • 阅读 6
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 学生专属云服务套餐 10元起购>>>   

使用iScroll时,input等不能输入内容的解决方法

做移动平台的应用,使用iscroll使屏幕上下滑动。发现当使用iscroll后,input等不能输入内容了。只要在iscroll.js文件中加入如下代码就ok了。

2

3

4

5

6

7

8

9

function allowFormsInIscroll(){

 [].slice.call(document.querySelectorAll('input, select, button')).forEach(function(el){

 el.addEventListener(('ontouchstart' in window)?'touchstart':'mousedown', function(e){

 e.stopPropagation();

  

 })

 })

 }

 document.addEventListener('DOMContentLoaded', allowFormsInIscroll, false);

以上代码原理是:页面加载完成后查找到所有的'input, select, button'元素并依次绑定'touchstart'或'mousedown'事件,在执行事件的时候停止事件的传播,这样行了。

使用了iscroll之后,你会发现点击输入框时不灵敏,经常无法聚焦;页面文字也无法选择和复制。这是由于iscroll要监听鼠标事件和触摸事件来进行滚动,所以禁止了浏览器的默认行为。

iscroll不分青红皂白,禁止了浏览器的一切默认行为,导致上述问题。所以我们需要稍作修改: 

问题原因是:iscroll需要一直监听用户的touch操作,以便灵敏的做出对应效果,所以它把其余的默认事件屏蔽了。

onBeforeScrollStart: function (e) { e.preventDefault(); }, 


改成


onBeforeScrollStart: function (e) { 
var target = e.target; 
while (target.nodeType != 1) target = target.parentNode; 
if (target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEXTAREA’) 
e.preventDefault(); 
}, 

共有 人打赏支持
粉丝 0
博文 7
码字总数 934
×
PorcoMar
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: