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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-08-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LeoXu的博客

使用 Chrome 浏览器调试 WebView 中的网页

然后呢,运行 Android 程序,再打开 Chrome 浏览器,在地址栏输入 chrome://inspect/#devices,回车,然后找到这个 devi...

703
来自专栏企鹅号快讯

微信更新到版本了,带来了哪些抢眼的功能呢?

在新年前夕,微信又放出了大招,更新了6.6.1版本,而且这次是安卓、iOS同时更新,并带来了3个新的功能: ? 新增小游戏 除了最近备受大家宠爱的“跳一跳”。在...

1939
来自专栏HTML5学堂

一起详析“图片预加载”

HTML5学堂:2014年年初的时候,曾经在自己的博客“独行冰海”里写过关于图片预加载和懒加载的博文,当时的文章当中没有写什么关于预载的代码范例,当前打算把预载...

7738
来自专栏Python小屋

Python批量导入图片生成能治疗颈椎病的HTML5版课件

本文要点:Python文件操作,HTML5的figure元素和CSS3属性的用法。 说明:1):本文图片来自于相关阅读中Python批量导出多个PPT/PPTX...

2644
来自专栏恰同学骚年

自己动手写工具:自动点击小插件

  当我们需要对一个网页上的某个按钮进行多次点击以求得某种“好处”的时候,例如天猫的抢红包活动,我们可能需要点击N次之后才有可能获得一个红包,但是这个N是一个未...

562
来自专栏前端说吧

Html2canvas - 微信中长按存图 - 将h5活动结果保存到本地

 现在有很多在微信里流行的h5活动页。这些小h5大部分都是简单的交互然后得出一个abcd早就拟定好的结果,根据你的选项分几种情况,最终得到其中一个作为你测试的答...

632
来自专栏源码之家

VCF文件转换——导入导出移动手机电话本不再麻烦

1326
来自专栏编程微刊

前端切图:一句代码实现返回顶部

1214
来自专栏lgp20151222

html取地址栏参数的方法

671
来自专栏HTML5学堂

传统企业站开发 - 模块开发

这几周我们接连讲解了如何实现一个页面的搭建,从最初的各种分析,标签选择,一直到可以实现页面的整体布局。这一系列的知识点讲解中,我们熟知了对一个网页PSD图的处理...

28711

扫描关注云+社区