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 条评论
登录 后参与评论

相关文章

来自专栏阿凯的Excel

快心遂意-快捷键弱智版

今天和大家分享一些快捷键,为啥非要分享快捷键呢,因为想让大家有种 快捷键弱智版正式开始 Ctrl+Z 撤销 Ctrl+Y 撤销的撤销(我猜你不知道,你可以试一...

2573
来自专栏无原型不设计

在Mockplus中,如何做鼠标悬停时菜单下拉的效果?

了解Mockplus的用户会知道,该原型工具目前并不直接支持鼠标悬停功能。但我经过尝试,发现想用它实现一个鼠标悬停事件并不是什么难事,比如网页设计中很常见的鼠...

2986
来自专栏性能与架构

CSS选择器的性能优化

CSS选择器的性能排名(从最快者开始): (1)识别器:#id (2)类:.class (3)标签:div (4)相邻兄弟选择器:a + i (5)父类选择器:...

2997
来自专栏非著名程序员

Android 自定义倒计时 View

2016年08月01日新的一周开始了,一篇自定义倒计时View开启了这周的篇章… ---- 国际惯例,效果图如下; ? 带阴影带指引点的倒计时View,不要被...

1949
来自专栏腾讯大讲堂的专栏

iOS 9对前端做了什么?

作者:big(谢刚),腾讯TGideas团队前端工程师,前端虐我千万遍,我待前端如初恋! 随着9月25日iPhone6s的发货,早已预订入手的小伙伴已开始了新一...

2106
来自专栏玩转全栈

小程序怎么将视觉搞实现成ui

这个真的是强烈建议,对于一个页面,首先应该大致的看一下可以划分为哪几个模块,通常的划分方式是,整体来看,是row排列,还是column排列的,那么,最擅长做这种...

30317
来自专栏快乐八哥

JavaScript中removeEventListener()使用注意事项

最近复习JavaScript中的基础知识,一方面给新来的实习生介绍一下JavaScript基础知识,一方面也是自己工作一年来自己在JavaScript方面学习的...

1699
来自专栏地方网络工作室的专栏

CSS3 做一个有闪光效果的进度条

CSS3 做一个有闪光效果的进度条 今天刚入职的小前端看到一个进度条的效果,想要实现,但是不知道如何下手,于是,我写了一个demo给它看下。 最终效果:CSS3...

1958
来自专栏李蔚蓬的专栏

HTML & CSS 知识点梳理(内涵大量Demo噢~)

1.<html>标记 <html>标记是HTML文件的开头。所有HTML文件都是以<html>标记开头,以</html>标记结束,HTML页面的所有标记都要放...

722
来自专栏菜鸟前端工程师

html+css学习笔记013-阿里图标0iframe

842

扫码关注云+社区