iScroll4下表单元素聚焦及键盘的异常问题-變量-匯編語言學習筆記

本文是zawa同事写的一篇博文，相信很多在webapp开发中的同学使用iscroll4会遇到的该问题，问过zawa兄的建议，在这里分享给大家，希望能帮助到各位~

原文地址：http://www.zawaliang.com/2013/10/443.html

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

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

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

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

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

由于不确定orientationchange与onresize哪个先触发，而且Android下orientationchange之后获取高度存在时间差，所以这里统一到onresize进行处理。

$(window).on('orientationchange', function(e) {_landscape2 = !!(window.orientation & 2);}).on('resize', function(e) {// 不确定orientationchange与onresize哪个先触发,这里稍微延时setTimeout(function() {// Android下orientationchange之后获取window值会延时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;}, 200);});

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

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

键盘的问题解决了，我们需要解决聚焦元素的位置问题，否则可能会出现聚焦元素不在可视区域的情况，用户茫然不知当前输入的是啥。需要注意的是在iOS6下，系统会自动定位到聚焦的元素，但升级后的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();}