最近做移动平台的应用,使用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();
},

使用iScroll时,input等不能输入内容的解决方法(share)的更多相关文章

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

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

  2. 使用iScroll时input复选框不能选中解决方法

    http://blog.csdn.net/xw505501936/article/details/51886018

  3. sublime text3 输入中文的解决方法及注册

    让它输入中文的原理就是给sublime text3给打上个补丁libsublime-imfix.so,这个补丁可以直接git回来,或者下载补丁的源码编译安装. Ubuntu可以直接按照下面的教程 su ...

  4. session_start()导致history.go(-1)返回时无法保存表单数据的解决方法

    问题背景: 在填写完表单提交时,由于某个表单项可能填写的不合法,导致提交失败,返回表单页面.但返回后所有的表单都被清空了,重新填写比较麻烦,度娘解释说,是由于每个页面都调用了session_start ...

  5. Dedecms5.7搜索结果页空白无内容的解决方法

    Dedecms5.7搜索结果页空白.没有内容的解决方法 许多网友在修改dedecms5.7版本的搜索功能时搜索空白的解决方法,正解如下: 系统设置—>其他选项—->是否启用文章全文检索功能 ...

  6. PhpStorm terminal无法输入命令的解决方法

    下面小编就为大家带来一篇PhpStorm terminal无法输入命令的解决方法.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   在使用PhpStorm时,点击下面的 ...

  7. vue项目初始化时npm run dev报错webpack-dev-server解决方法

    vue项目初始化时npm run dev报错webpack-dev-server解决方法 原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好webpack-dev- ...

  8. XCode 添加自定义framework运行时出现dyld: Library not loaded的解决方法

    XCode添加自定义framework运行时出现dyld: Library not loaded的解决方法 在使用自定义的framework运行时,会出现如下的错误: dyld: Library no ...

  9. ubuntu14.04 LTS 搜狗输入法安装和不能输入中文的解决方法

    搜狗输入法安装 1.首先通过Ubuntu软件中心,需要安装:fcitx https://pinyin.sogou.com/linux/help.php 2.然后再安装搜狗输入法包 https://pi ...

随机推荐

  1. web.xml配置解释

    web.xml中配置的加载优先级:首先可以肯定的是,加载顺序与它们在 web.xml 文件中的先后顺序无关.即不会因为 filter 写在 listener 的前面而会先加载 filter.最终得出的 ...

  2. Google翻译请求(难点是tk参数)

    业务需求需要将一些文字翻译一下··· 但是直接调用接口收费啊啊啊啊(貌似是前几百万字免费,然后就开始收费了)···· 就想研究一下Google翻译接口... 想模拟Google向服务器发送一个Http ...

  3. HDOJ 3507 Print Article

    Print Article Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)To ...

  4. php补充

    PHP 教程 echo 和 print 之间的差异:echo - 能够输出一个以上的字符串print - 只能输出一个字符串,并始终返回 1提示:echo 比 print 稍快,因为它不返回任何值. ...

  5. UI第五节——手势

    #import "AppDelegate.h" @interface AppDelegate () @end @implementation AppDelegate - (BOOL ...

  6. OC第七节——内存管理

    戏言: iOS开发已经到了一个ARC时代,一般不需要我们过多的去关注内存是怎么分配,怎么管理的.很长一段时间,我也不知道内存管理是什么鬼,但如果遇到这方面的问题,却找不到解决办法确实很头疼的.So,还 ...

  7. java系列-安装MySql(三)

    第一大步:MySQL安装文件分为两种,一种是msi格式的,一种是zip格式的.如果是msi格式的可以直接点击安装,按照它给出的安装提示进行安装(相信大家的英文可以看懂英文提示),一般MySQL将会安装 ...

  8. ICloud没有密码怎么注销?

    忘了密码的用这方法就可以啦1.现在我说你做 . 先进入 iCloud 点击 某某账户(要删的账户)2.第二栏密码那里删除原来的再输入ios(任意密码)3.然后点完成 之后会出现错误.请点 好.然后左上 ...

  9. 正则表达式学习笔记(附:Java版示例代码)

    具体学习推荐:正则表达式30分钟入门教程 .         除换行符以外的任意字符\w      word,正常字符,可以当做变量名的,字母.数字.下划线.汉字\s        space,空白符 ...

  10. [Effective JavaScript 笔记]全书总结

    这本书中就像它前言中说的那样,这本书不是给初学者的.需要一定的基础,而且有一定的编码实践,才能很好的理解书里讲到的内容.学习一门编程语言,需要熟悉它的语法.形式和结构,这样才会编写合法的.符合语义的. ...