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

相关文章

来自专栏计算机编程

【页面效果优化 1】下划线与水波纹

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

CSS 幽灵元素方案垂直居中注意事项

之前,我们转载了一篇博文CSS居中完全指南,在这篇文章中,提到了一种使用幽灵元素方式的解决垂直居中的问题的方案。 这种方案非常适合解决一些图片布局,因此我也在项...

21050
来自专栏CSDN技术头条

有关网页渲染,每个前端开发者都该知道的那点事

【编者按】其实,有关网页渲染的文章很多,但是相关信息比较分散,且论述并不是很完整。如果要想对这个主题有个大致的了解,我们还得学习很多知识。因此,Web开发者Al...

21980
来自专栏前端说吧

PS-前端切图教程(切jpg图和切png图)

98450
来自专栏hightopo

基于 HTML5 WebGL 的 3D SCADA 主站系统

20030
来自专栏非著名程序员

Android弹软键盘时之ListView的变化控制

前几天有个人问我,说在最底下有个输入框,弹出键盘时整个界面都一起跟着移动,上面的标题栏都移到上面看不到了,界面非常难看。其实这种问题一般存在于这样的界面布局中那...

19170
来自专栏知晓程序

开发 | 一篇文章读懂微信小程序视图层

13320
来自专栏Winter漫聊技术

动起来-几个Android常用动效

本文Demo: https://github.com/XunMengWinter/Fly Material Design初露锋芒: http://www.ji...

12030
来自专栏刘望舒

Android绘制优化(二)布局优化

前言 我们知道一个界面的测量和绘制是通过递归来完成的,减少布局的层数就会减少测量和绘制的时间,从而性能就会得到提升。当然这只是布局优化的一方面,那么如何来进行布...

27980
来自专栏企鹅号快讯

SVG之旅:SVG的图层和渲染顺序

不管是在制图软件中还是Web页面的DOM元素,都有层的概念。在制图软件中,大家比较熟悉,能非常的清晰的看出图层的概念。而在Web页面中,特别是我们熟悉的HTML...

52950

扫码关注云+社区

领取腾讯云代金券