iScroll5 表单元素无法失焦 解决方法
iScroll5 表单元素无法失焦 解决方法
HTML5学堂：iScroll框架从4版本升级到5版本之后，很好的解决了滚动区域中表单元素不能聚焦的问题，但是，2014年年底测试的时候发现了5版本的一个问题，如果在滚动区域当中增加了表单元素，在点击表单元素之后可以正常输入，却无法让表单元素失焦。
效果图：
代码解释：在文本框当中输入了HTML5学堂之后，再点击其他位置，当前文本框并不能失焦。
这个问题当时让自己实在是有些头疼。后来自己翻阅了iScroll5的文档，还是没有找到相关的解决办法（如果各位有查找到解决办法，欢迎沟通交流）。于是，就只能另辟蹊径，解决这个问题了。第一想到的其实就是事件委托，将事件绑定在body身上，然后进行判断点击的元素类型/元素名称，只要不是input就让原来的表单元素失焦（如果滚动区域中有两个input，一个input处于聚焦状态的时候，点击另外一个，能够使得原来的input失焦）。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>iScroll5 表单元素无法失焦 解决方法</title>
<link rel="stylesheet" href="css/reset.css">
<meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
<script src="js/jquery-1.7.2.js"></script>
<script src="js/iscroll.js"></script>
<style>
.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;
}
</style>
</head>
<body>
<div class="box" id="wrap">
<ul class="list">
<li>HTML5学堂</li>
<li>移动端框架</li>
<li>iScroll5</li>
<li>表单元素无法失焦的解决方法</li>
<li>表单元素处于滚动区域</li>
<li>
<form action="">
<input type="text" name="" id="">
</form>
</li>
<li>无法失焦</li>
<li>利用事件委托解决</li>
<li>
<form action="">
<input type="text" name="" id="">
</form>
</li>
</ul>
</div>
</body>
<script>
var myScroll = new IScroll('#wrap', {
mouseWheel: true,
scrollbars: true,
click: true
});
$('body').click(function(e){
if(e.target.nodeName != "INPUT"){
$('input').blur();
};
})
</script>
</html>代码说明：顶部的viewport控制务必要添加上。基本功能基于了两个框架，分别是jQuery和iScroll。
测试效果，能够正常失焦：
代码解释：上图为在input中输入了文字，然后点击了滚动区的任意位置，input实现失焦。
另外，在使用console.log去打印e.target的时候，很奇怪的是，input类的元素被点击进入聚焦状态的时候，并不会触发body元素上的点击事件，具体原因还有待研究。如果真的是不会产生点击事件的话，那么我们可以把代码进行进一步的优化，将body的点击事件修改为。
$('body').click(function(){$('input').blur();})PS：iScroll5，在小米中相当卡。另外，在小米机器上不能够聚焦（可以尝试采用iScroll4试试，看看是不是卡顿）
关于iScroll5的功能可以查看文章《移动端框架 滚动类 iScroll5》