`
liuguofeng
  • 浏览: 449582 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

iScroll4下表单元素聚焦及键盘的异常问题

 
阅读更多

问题:在使用了iScroll4的容器内,当表单元素focus聚焦后键盘出现时,可能会存在iScroll区域高度不更新,滚动异常问题;而且当前聚焦的表单元素可能不出现在可视区域内,影响用户体验。

iKeyboardScroll4就是这么一个解决方案
Github见:https://github.com/zawaliang/iKeyboardScroll4

 

如今大多数机型都支持onorientationchange事件,iScroll4在不支持onorientationchange事件的机型中使用onresize事件来对滚动区域进行自动刷新操作。所以上面说的表单情况,在大多数机型里都会存在高度不刷新的情况。

RESIZE_EV = 'onorientationchange' in window ? 'orientationchange' : 'resize',

 

那么现在的问题就是检测键盘出现与否,然后调用refresh接口刷新滚动区域高度。由于没有相应的接口来检测键盘状态,所以我们通过onresize来检测窗口高度变化,配合当前元素的聚焦状态来模拟键盘状态。同时需要考虑在键盘出现时翻屏的情况。

 

以下为核心函数,用于检测键盘状态:

function detect() {
        // 不等表示翻屏
        if (_landscape != _landscape2) {
            // 屏幕翻转且翻转前键盘处于显示状态时,交换宽高
            if (_display) {
                var tmpWidth = _initWinWidth;
                _initWinWidth = _initWinHeight;
                _initWinHeight = tmpWidth;
            } else {
                _initWinWidth = $(window).width();
                _initWinHeight = $(window).height();
            }
        }

        var h = $(window).height();
        _display = _activeElement !== null && _initWinHeight > h;

        $.each(_callback, function(k, v) {
            v.apply(null, [_display, _activeElement]);
        });
        _landscape = _landscape2;
    }

 

由于不确定orientationchange与onresize哪个先触发,并且实测发现iOS下orientationchange比onresize迟触发,造成翻屏状态的获取不好捕获,所以针对IOS系统,当翻屏时我们使用orientationchange来检测,其他状态下使用onresize。翻屏状态下,Android下orientationchange之后获取高度存在时间差,所以需要onresize后延时获取进行处理。

 

$(window).on('orientationchange', function(e) {
        _landscape2 = !!(window.orientation & 2);

        // ios下可以直接取宽高,且ios下onresize似乎比orientationchange先触发,因此setTimeout的时机不好掌控
        _ios7 && detect();
    }).on('resize', function(e) {
        // ios下onresize似乎比orientationchange先触发,因此setTimeout的时机不好掌控
        // 对于ios,翻屏时统一通过orientationchange进行处理,非翻屏时统一使用onresize
        // ios下,onresize后若宽度不相同证明翻屏了,此时使用orientationchange来进行处理
        // Android不变,使用onresize处理
        if (_ios7 
            && (_landscape != _landscape2 // 此判断是为了防止orientationchange先于onresize触发
                || $(window).width() != _initWinWidth)) {
            return;
        }

        _timer && clearTimeout(_timer);
        // Android下orientationchange之后获取window值会延时
        _timer = setTimeout(detect, 200);
    });

当存在聚焦元素,且窗口高度比初始化时的窗口高度小时,即认为键盘出现了。

_display = _activeElement !== null && _initWinHeight > h;

 

键盘的问题解决了,我们需要解决聚焦元素的位置问题,否则可能会出现聚焦元素不在可视区域的情况,用户茫然不知当前输入的是啥。需要注意的是在iOS6下,系统会自动定位到聚焦的元素,但升级后的iOS7,受iScroll影响,造成输入框focus聚焦失败; iOS5.x 6.x下不存在这个问题,具体原因待研究(这里有篇文章不错,可以看下:《运用webkit绘制渲染页面原理解决iscroll4闪动的问题》),所以iOS7下的表现跟Android比较类似,所以我们只对非iOS6以及iOS7的做处理即可。

// 聚焦且键盘显示时,修正输入框位置
// iOS6会自动定位到输入框,但还是需要refresh位置
// iOS7不会自动定位到输入框,表现跟Android类似
if ((!$.os.ios || _ios7) 
   && display && focusElement) {
   offset = $.type(offset) == 'number' ? offset : 5;

   var el = $(focusElement),
       winHeight = $(window).height(),
       top = el.height() + el.offset().top + offset;

   // iScrollInstance.y为负值
   if (top - iScrollInstance.y > winHeight) {
      iScrollInstance.scrollTo(0, winHeight - top + iScrollInstance.y, 0);
   }

   // iOS7下聚焦键盘出现后,输入框没聚焦,这里设置下
   _ios7 && focusElement.focus();
}

 

说到iOS7,还有一个地方比较怪异,当点击输入框,键盘会出现,但是输入框没有聚焦。需要手动再点击一次。初步排查是iScroll4的问题,但没搞懂是哪出问题了,所以iKeyboardScroll4里对这些情况做了处理,暂时解决了这一问题。

移动侧WebApp坑还是比较多,需要不断的积累经验才行啊~

分享到:
评论

相关推荐

    iscroll4

    6. **内存优化**:iscroll4通过动态加载和卸载视口内的内容,实现了内存的高效管理,避免了在大量数据或大页面时的性能问题。 在使用iscroll4时,开发者通常需要按照以下步骤进行: 1. **引入库**:首先,在HTML...

    iscroll4.js

    特别是在内容动态加载的场景下,iscroll4.js能够有效地管理页面元素,使得用户在滚动到页面底部时自动加载更多内容,或者在顶部时触发刷新操作。 上拉加载更多功能( Infinite Scroll)是iscroll4.js的一个亮点。在...

    iScroll4框架

    iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android 这些系统上广泛使用) 提供了一种本地化的方式来对一个限定了高度和宽度的...

    iscroll4例子

    1. **高性能滚动**:iscroll4通过硬件加速和精心优化的代码,实现了在移动设备上流畅的滚动体验,即使在处理大量元素的列表时也能保持顺滑。 2. **多方向滚动**:支持水平和垂直滚动,可以根据应用场景灵活选择。 ...

    原生 iscroll-4

    1. **高性能**:iScroll-4 使用硬件加速,能够处理大量的DOM元素,提供流畅的滚动效果。 2. **多平台支持**:适用于各种浏览器和移动设备,包括iOS、Android、Windows Phone等。 3. **可定制性**:支持多种配置选项...

    iScroll 4.2.5 中文API

    4. **精确捕捉元素**:可以精确地控制元素的停止位置,确保元素始终对齐网格。 5. **自定义滚动条**:允许开发者根据需求定制滚动条的外观和行为。 #### 快速上手 要开始使用iScroll,首先需要理解其工作原理和基本...

    iscroll-4.rar

    iscroll.js是Matteo Spinelli开发的一个js文件,使用原生js...旨在解决移动webkit系浏览器的区域滚动问题,兼容mobile safari、android默认浏览器、safari、chrome、firefox5+、opera11+、IE9+及其他webkit核心浏览器。

    iscroll5 refresh 及iscroll4刷新功能

    本文将重点讲解iscroll5的刷新功能及其与iscroll4的区别。 **一、iscroll5的刷新功能(pull-to-refresh)** 1. **基本概念**:Pull-to-refresh,即“下拉刷新”,是移动应用中常见的一种交互模式,用户通过在内容...

    iscroll-4 滚动内容

    **iscroll-4 滚动内容详解** iscroll 是一款轻量级的JavaScript库,专为移动设备设计,主要用于解决在iOS、Android等平台上实现流畅的滚动效果的问题。iscroll-4是这个库的一个版本,它提供了一个高效且自定义程度...

    iscroll5上拉下拉实例完整demo

    iscroll5相较于之前的iscroll4版本,引入了许多改进和新特性。例如,性能优化,支持更复杂的布局(如嵌套滚动),提供了更丰富的API接口,以及更好的触摸事件处理。在这个实例中,我们可以看到如何将这些特性应用到...

    iscroll分页滚动(加回到顶部)

    下拉刷新是iscroll的一个常见用法,当用户在页面顶部向下拉动时,iscroll会触发特定的回调函数,允许开发者加载新的数据。实现这一功能的关键在于设置iscroll的`pullDownAction`和`pullUpAction`属性,以及正确配置...

    iscroll.js下载 5.1.3最新版本

    **iscroll.js** 是一个高性能、轻量级的JavaScript滚动库,主要用于解决移动Web端的滚动问题,尤其在处理触摸事件和实现平滑滚动效果时表现出色。它为开发者提供了强大的API接口,使得在网页中实现复杂滚动效果变得...

    H5使用iscroll-4模拟手机app下拉刷新功能实现demo

    `H5`(HTML5)作为一种强大的网页开发标准,结合`iscroll-4`库,可以有效地解决这个问题,尤其是实现手机App中的下拉刷新功能。下面我们将深入探讨如何使用`iscroll-4`在`H5`页面中实现这一功能。 `iscroll-4`是由...

    iScroll下拉刷新上滑加载

    使用经典插件iScroll4稍作封装,采用ajax请求数据,实现移动端列表页的功能; 1.下拉刷新当前列表页数据; 2.上滑加载更多列表数据; iScroll4简介: iScroll 4 这个版本完全重写了iScroll这个框架的原始代码...

    iScroll框架

    iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android这些系统上广泛使用)提供了一种本地化的方式来对一个限定了高度和宽度的元素的...

    iscroll框架

    容器元素通常是需要实现滚动功能的DOM元素,配置对象则可以定制iscroll的行为。 ```javascript var myScroll = new IScroll('#wrapper', { scrollX: true, // 水平滚动 scrollY: true, // 垂直滚动 momentum: ...

    iscroll插件

    iscroll是一款轻量级的JavaScript插件,专为解决移动设备上的滚动问题而设计。在移动设备上,由于触摸事件的处理和原生滚动的复杂性,开发人员经常面临实现流畅滚动的挑战。iScroll通过提供高性能的滚动解决方案,很...

Global site tag (gtag.js) - Google Analytics