iKeyboardScroll4.js

/**
 * iKeyboardScroll4 v0.0.1
 * 2013, zawa, www.zawaliang.com
 * Licensed under the MIT license
 * 
 * iOS7下由于受iScroll影响，造成输入框focus聚焦失败； iOS5.x 6.x没这个问题; 具体原因待研究
 */

define(function(require, exports, module) {
    var _initWinWidth = $(window).width(), // 窗口初始宽度
        _initWinHeight = $(window).height(), // 窗口初始高度
        _landscape = !!(window.orientation & 2), // http://www.codecouch.com/2011/11/detecting-orientation-changes-in-mobile-safari-on-ios-and-other-supported-browsers/
        _landscape2 = _landscape,
        _activeElement = null,
        _display = false,
        _ios7 = $.os.ios && parseFloat($.os.version) >= 7,
        _callback = [],
        _timer = null;


    function watch(selector) {
        $(selector).each(function(k, v) {
            // 事件代理的方式可能被阻止冒泡,这里使用直接绑定
            if ($(v).attr('data-keyboard-init') != 1) {
                if (_ios7) {
                    $(v).tap(function(e) {
                        this.focus();
                    });    
                }

                $(v).on('focus', function(e) {
                    _activeElement = this;

                    // iOS7不触发focus,这里手动触发; 这里的focus不可去掉,否则fixIScroll4Onchange里的focus可能存在不生效的情况
                    _ios7 && this.focus();
                }).on('blur', function(e) {
                    _activeElement = null;
                }).attr('data-keyboard-init', 1);
            }
        });
    }

    function pushCallback(callback) {
        if ($.type(callback) == 'function') {
            _callback.push(callback);
        }
    }

    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;
    }


    // 监控聚焦元素
    watch('input,textarea,select');

    // 绑定
    $(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);
    });
    

    return {
        /**
         * 为元素添加监控，适用于新增的元素
         * @param {String|Object} selector
         */
        watch: watch,
        /**
         * 绑定键盘显隐回调, 会在窗口尺寸变化时触发
         * @param {Function} callback(display, focusElement) display为true时表单键盘显示; focusElement聚焦元素
         */
        onchange: pushCallback,

        /**
         * 键盘变化时同步刷新iScroll4,并且定位到聚焦元素处
         * @param {Object} iScrollInstance iScroll实例
         * @param {Int} [offset :5px] 聚焦元素偏移值
         */
        fixIScroll4Onchange: function(iScrollInstance, offset) {
            pushCallback(function(display, focusElement) {
                // 当iScroll使用resize时,键盘出现会自动刷新高度,这里只对使用onorientationchange的情况做处理
                if ('onorientationchange' in window) {
                    iScrollInstance.refresh();
                }

                // 聚焦且键盘显示时,修正输入框位置
                // 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();
                }
            });
        }
    };
});