使用iScroll时，input等不能输入内容的解决方法（share）

　　　最近做移动平台的应用，使用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）

修改版：

最新文章

热门文章