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

2015/07/10 08:39:09 | 作者：HTML5学堂（码匠） | 分类：插件API应用 | 关键词：iScroll,移动端框架,滚动类,开发经验

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

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

效果图：

iScroll5 表单点击其他地方无法失焦

代码解释：在文本框当中输入了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>