注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】iScroll5 表单元素无法失焦 【移动端框架 滚动类】  

2014-11-07 13:08:50|  分类: 移动端专题 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

iScroll5 表单元素无法失焦 【移动端框架 滚动类】

iScroll框架从4版本升级到5版本之后,很好的解决了滚动区域中表单元素不能聚焦的问题,但是,最近测试的时候发现了5版本的一个问题,如果在滚动区域当中增加了表单元素,在点击表单元素之后可以正常输入,却无法让表单元素失焦。这个问题实在是有些头疼。
自己翻阅了iScroll5的文档,还是没有找到相关的解决办法(如果各位有查找到解决办法,欢迎沟通留言交流)。于是,就只能另辟蹊径,解决这个问题了。第一想到的其实就是事件委托,将事件绑定在body身上,然后进行判断点击的元素类型/元素名称,只要不是input就让原来的表单元素失焦(如果滚动区域中有两个input,一个input处于聚焦状态的时候,点击另外一个,能够使得原来的input失焦)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>iScroll test</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>独行冰海博客</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。
测试效果,能够正常失焦:
iScroll5 表单元素无法失焦 【移动端框架 滚动类】 - 独行冰海 - 独行冰海
 
上图为在input中输入了文字,然后点击了滚动区的任意位置,input实现失焦。

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

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

欢迎互相沟通交流~独行冰海
  评论这张
 
阅读(84)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017