做移动平台的应用,使用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要监听鼠标事件和触摸事件来进行滚动,所以禁止了浏览器的默认行为。

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等不能输入内容的解决方法的更多相关文章

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

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

  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. VTK初学一,a Mesh from vtkImageData

    #ifndef INITIAL_OPENGL #define INITIAL_OPENGL #include <vtkAutoInit.h> VTK_MODULE_INIT(vtkRend ...

  2. nginx专题

    1.Nginx和php性能优化相关 专家向磊http://slaytanic.blog.51cto.com/2057708/1173021 2.Puppet利用Nginx多端口实现负载均衡http:/ ...

  3. C#之interface接口

    C#中接口与抽象类很相似,他们都无法实例化自己的对象,但是他们也有很重要的区别.Interface与Abstract class中,类不能多重继承,但是接口可以多重继承. 这段代码表明,声明接口的方法 ...

  4. CSS伪选择器的使用-遁地龙卷风

    分为伪元素选择器和伪类选择器两种,前者两个冒号,后者一个冒号,但是浏览器都看做一个冒号 1.a.::first-line 逐层匹配,直到有文本元素且结束改行为止 设置css属性word-break:b ...

  5. html5 图片转为base64格式异步上传

    因为有这个需求(移动端),所以就研究了一下,发现还挺不错的.这个主要是用了html5的API,不需要其他的JS插件,不过只有支持html5的浏览器才行,就现在而言应该大部份都支持的.<!DOCT ...

  6. Effective Java 学习笔记之创建和销毁对象

    一.考虑用静态工厂方法代替构造器 1.此处的静态工厂方法是指返回指为类的对象的静态方法,而不是设计模式中的静态工厂方法. 2.静态工厂方法的优势有: a.使用不同的方法名称可显著地表明两个静态工厂方法 ...

  7. 迟来的Android的Camera开发总结

    这是好久前写的项目,但一直没有去总结.刚好在准备找工作这段时间来总结自己做过的东西,学到的东西. 写Android的自定义的相机应用时,首先要知道一些Camera开发必须知道的尺寸,不然在调试的时候, ...

  8. 160809225-叶桦汀《C语言程序设计》实验报告

    #include<stdio.h> int main() { int a,b,c,t; printf("请输入三个整数"); scanf("%d%d%d&qu ...

  9. JS中try....catch

    1.事情还有得挽回,换条路走try { 执行某个逻辑} catch (e) { 出问题,换个逻辑执行} 2.体面的退出try { 正常流程} catch (e) { 弹个框告诉用户不好意思出了点问题 ...

  10. MyEclipse 15 集成SVN

    一.在线更新 地址:http://subclipse.tigris.org/update_1.8.x 二.手动安装