scroll html5无效,移动端滚动类框架 iScroll5 表单元素无法失焦 解决方法

iScroll5 表单元素无法失焦 解决方法

HTML5学堂：iScroll框架从4版本升级到5版本之后，很好的解决了滚动区域中表单元素不能聚焦的问题，但是，2014年年底测试的时候发现了5版本的一个问题，如果在滚动区域当中增加了表单元素，在点击表单元素之后可以正常输入，却无法让表单元素失焦。

效果图：

代码解释：在文本框当中输入了HTML5学堂之后，再点击其他位置，当前文本框并不能失焦。

这个问题当时让自己实在是有些头疼。后来自己翻阅了iScroll5的文档，还是没有找到相关的解决办法(如果各位有查找到解决办法，欢迎沟通交流)。于是，就只能另辟蹊径，解决这个问题了。第一想到的其实就是事件委托，将事件绑定在body身上，然后进行判断点击的元素类型/元素名称，只要不是input就让原来的表单元素失焦(如果滚动区域中有两个input，一个input处于聚焦状态的时候，点击另外一个，能够使得原来的input失焦)。

iScroll5 表单元素无法失焦 解决方法

.box {

height: 400px;

overflow: hidden;

border: 1px solid #f00;

}

.list li {

height: 79px;

line-height: 79px;

border-bottom: 1px solid #666;

font-size: 24px;

font-weight: bold;

}

.list input {

width: 240px;

height: 66px;

}

• HTML5学堂
• 移动端框架
• iScroll5
• 表单元素无法失焦的解决方法
• 表单元素处于滚动区域
• 无法失焦
• 利用事件委托解决

var myScroll = new IScroll('#wrap', {

mouseWheel: true,

scrollbars: true,

click: true

});

$('body').click(function(e){

if(e.target.nodeName != "INPUT"){

$('input').blur();

};

})

代码说明：顶部的viewport控制务必要添加上。基本功能基于了两个框架，分别是jQuery和iScroll。

测试效果，能够正常失焦：

代码解释：上图为在input中输入了文字，然后点击了滚动区的任意位置，input实现失焦。

另外，在使用console.log去打印e.target的时候，很奇怪的是，input类的元素被点击进入聚焦状态的时候，并不会触发body元素上的点击事件，具体原因还有待研究。如果真的是不会产生点击事件的话，那么我们可以把代码进行进一步的优化，将body的点击事件修改为。

$('body').click(function(){$('input').blur();})

PS：iScroll5，在小米中相当卡。另外，在小米机器上不能够聚焦(可以尝试采用iScroll4试试，看看是不是卡顿)

欢迎沟通交流~HTML5学堂