使用iScroll时,input等不能输入内容的解决方法
2012-11-09 19:14
211 查看
最近做移动平台的应用,使用iscroll使屏幕上下滑动。发现当使用iscroll后,input等不能输入内容了。只要在iscroll.js文件中加入如下代码就ok了。
问题原因是:iscroll需要一直监听用户的touch操作,以便灵敏的做出对应效果,所以它把其余的默认事件屏蔽了。
以上代码原理是:页面加载完成后查找到所有的'input, select, button'元素并依次绑定'touchstart'或'mousedown'事件,在执行事件的时候停止事件的传播,这样行了。
iscroll不分青红皂白,禁止了浏览器的一切默认行为,导致上述问题。所以我们需要稍作修改:
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等不能输入内容的解决方法
- 使用iScroll时,input等不能输入内容的解决方法
- 使用iScroll时,input等不能输入内容的解决方法(share)
- 使用iscroll后,input等不能输入内容的解决办法
- 使用iScroll时input复选框不能选中解决方法
- Android Studio 实现AIDL时在不能使用 aidl 目录下内容的解决方法
- 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法
- ubuntu中使用tab键来补齐输入命令普通用户可用切换root后不能的解决方法
- 在页面中使用updatePanel和freeTextBox时,当页面刷子新后,ftb不能输入内容的解决办法
- 在AJAX.NET中使用FCKEditor不能读取FCKEditor内容的解决方法
- jQuery中,在<input>中使用时间控件,当输入时间后,立刻获得该值(针对于.bind("input propertychange", function(){})不起作用的解决方法)
- QNX IDE使用cin输入变量不能编译通过的解决方法
- VC2008使用中不能输入中文的解决方法
- 子级对象使用float,父级div不能被父级内容撑开解决方法
- 解决Struts2.5不能使用通配符方式动态方法调用
- asp.net updatepanel 导致JS不能加载,而无法使用的解决方法
- 页面中中文链接不能使用的解决方法
- thinkphp在Nginx下使用PATHINFO模式显示no input file specified的解决方法
- 关于更改ip后dbconsole服务不能启动(em不能使用)问题的根本解决方法(ZZ)
- file_get_contents函数不能使用的解决方法