HTML5学堂-码匠 HTML5学堂

您当前位于:HTML5高级知识 ——> 移动端滚动类框架 iScroll5 表单元素无法失焦 解决方法

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

2015/07/10 08:39:09 | 作者:HTML5学堂(码匠) | 分类:HTML5高级知识 | 关键词:iScroll,移动端框架,滚动类,开发经验

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

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

效果图:

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

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

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

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>iScroll5 表单元素无法失焦 解决方法</title>
  6.     <link rel="stylesheet" href="css/reset.css">
  7.     <meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
  8.     <script src="js/jquery-1.7.2.js"></script>
  9.     <script src="js/iscroll.js"></script>
  10.     <style>
  11.         .box {
  12.             height: 400px;
  13.             overflow: hidden;
  14.             border: 1px solid #f00;
  15.         }
  16.         .list li {
  17.             height: 79px;
  18.             line-height: 79px;
  19.             border-bottom: 1px solid #666;
  20.             font-size: 24px;
  21.             font-weight: bold;
  22.         }
  23.         .list input {
  24.             width: 240px;
  25.             height: 66px;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="box" id="wrap">
  31.         <ul class="list">
  32.             <li>HTML5学堂</li>
  33.             <li>移动端框架</li>
  34.             <li>iScroll5</li>
  35.             <li>表单元素无法失焦的解决方法</li>
  36.             <li>表单元素处于滚动区域</li>
  37.             <li>
  38.                 <form action="">
  39.                     <input type="text" name="" id="">
  40.                 </form>
  41.             </li>
  42.             <li>无法失焦</li>
  43.             <li>利用事件委托解决</li>
  44.             <li>
  45.                 <form action="">
  46.                     <input type="text" name="" id="">
  47.                 </form>
  48.             </li>
  49.         </ul>
  50.     </div>
  51. </body>
  52. <script>
  53.     var myScroll = new IScroll('#wrap', {
  54.         mouseWheel: true,
  55.         scrollbars: true,
  56.         click: true
  57.     });
  58.     $('body').click(function(e){
  59.         if(e.target.nodeName != "INPUT"){
  60.             $('input').blur();
  61.         };
  62.     })
  63. </script>
  64. </html>

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

测试效果,能够正常失焦:

iScroll5 表单 点击其他地方失焦

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

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

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

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

关于iScroll5的功能可以查看文章《移动端框架 滚动类 iScroll5框架》

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS