zoukankan      html  css  js  c++  java
  • 使用iScroll时,input等不能输入内容的解决方法

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

    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);

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

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

    修改版:

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

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


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

    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(); 
    }, 
    【作者】:@挨踢前端
    【出处】:http://www.cnblogs.com/duanhuajian/
    【声明】:所有博文标题后加(share)的表示收集的他人优秀文章,其余的则为原创。欢迎转载,但请在显要位置显示本文链接,并保留本段声明,否则追究法律责任,谢谢!
  • 相关阅读:
    Lucene in action 笔记 case study
    关于Restful Web Service的一些理解
    Lucene in action 笔记 analysis篇
    Lucene in action 笔记 index篇
    Lucene in action 笔记 term vector
    Lucene in action 笔记 search篇
    博客园开博记录
    数论(算法概述)
    DIV, IFRAME, Select, Span标签入门
    记一个较困难的SharePoint性能问题的分析和解决
  • 原文地址:https://www.cnblogs.com/duanhuajian/p/2763159.html
Copyright © 2011-2022 走看看