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

相关文章

来自专栏前端说吧

CSS-各种cs样式之浏览器兼容处理方式汇总大全(更新中...)

3245
来自专栏施炯的IoT开发专栏

美化Windows Mobile上的自定义ListView

    在移动设备上,我们经常需要列出数据给用户看,ListView是经常用到的控件。而有些时候,我们需要同时列出预览的图片和数据,所谓图文并茂,这样可以带来更...

1876
来自专栏前端真相

HTML

1898
来自专栏知晓程序

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

1032
来自专栏刘望舒

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

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

2288
来自专栏软件开发

CSS3与页面布局学习总结(四)——页面布局大全

一、负边距与浮动布局 1.1、负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%。当一个元素与另一个元素m...

3396
来自专栏前端说吧

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

4495
来自专栏软件

那些前端常用的网站插件

这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了。 这个列表包含许多种类的资源,所以这里我将它们分组整理。 Jav...

2015
来自专栏娱乐心理测试

Ios常用第三方框架(一)

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

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

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

1925

扫码关注云+社区