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)的表示收集的他人优秀文章,其余的则为原创。欢迎转载,但请在显要位置显示本文链接,并保留本段声明,否则追究法律责任,谢谢!
  • 相关阅读:
    各个download文件说明
    网页中播放FLV文件的代码
    关于外部样式表中backgroundimage:url()的设置
    C# VS 2010创建、安装、调试 windows服务(windows service)
    HttpUtility.UrlEncode,Server.UrlEncode 的区别
    关于Coolite(EXT)问题之一
    Trace 日志文件
    document对象
    让IE6/IE7/IE8浏览器支持CSS3属性特效
    自定义URL Protocol Handler 呼出应用程序
  • 原文地址:https://www.cnblogs.com/duanhuajian/p/2763159.html
Copyright © 2011-2022 走看看