本文是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(); }

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

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

iScroll4下表单元素聚焦及键盘的异常问题的更多相关文章

  1. jQuery控制form表单元素聚焦

      CreateTime--2017年5月28日08:57:16Author:Marydon jQuery使form表单的第一个文本框聚焦 /** * 使form表单的第一个文本框聚焦 */ func ...

  2. 表单元素 disabled 和 readonly 辨析

    正确答案: B D 分析: Readonly 和 Disabled 是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: 1)Readonly只 ...

  3. HTML5初步——新的表单元素和属性

    HTML5初步--新的表单元素和属性 HTML5初步--新的表单元素和属性 <!DOCTYPE html> <html> <head> <meta chars ...

  4. 第六十七节,html表单元素

    html表单元素 学习要点: 1.表单元素总汇 2.表单元素解析 本章主要探讨HTML5中表单元素,表单元素用于获取用户的输入数据.   一.表单元素总汇 HTML5的表单中,提供了各种可供用户输入的 ...

  5. HTML 表单元素、 输入类型、Input 属性

    <input> 元素 最重要的表单元素是 <input> 元素. <input> 元素根据不同的 type 属性,可以变化为多种形态. 注释:下一章讲解所有 HTM ...

  6. html表单元素及表单元素详解

    原文 https://www.jianshu.com/p/b427daa8663d 大纲 1.认识表单 2.认识表单元素 3.表单元素的分类 4.表单元素——文本框 5.表单元素button 6.表单 ...

  7. H5C3--语义标签以及语义标签IE8兼容,表单元素新属性,度量器,自定义属性,dataList,网络监听,文件读取

    HTML5新增标签以及HTML5新增的api     1.H5并不是新的语言,而是html语言的第五次重大修改--版本     2.支持:所有的主流浏览器都支持h5.(chrome,firefox,s ...

  8. Html5 表单元素基础

    表单元素 1.定义: 表单是提供让读者在网页上输入,勾选和选取数据,以便提交给服务器数据库的工具.(邮箱注册,用户登录,调查问卷等) 2.表单元素(下拉框,输入框……) 3.表单主结构: <fo ...

  9. HTML5 学习总结(二)——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

随机推荐

  1. 提升手持设备点击速度之touch事件带来的坑!

    前言 上周六,我将我们项目的click换成了tap事件,于是此事如梦魇一般折磨了我一星期!!! 经过我前仆后继的努力,不计代价的牺牲,不断的埋坑填坑,再埋坑的动作,最后悲伤的发现touch事件确实是个 ...

  2. go语言条件语句 if else

    示例: if a < 5 { return 0 } else { return 1 } 关于条件语句,需要注意以下几点:  条件语句不需要使用括号将条件包含起来():  无论语句体内有几条语 ...

  3. 常让人误解的一道js小题

    一道小题引发的深思 今天无意中看到一个js笔试题,不由得想起初学js那会被各种题目狂虐的心酸,虽说现在也会被笔试题所虐,但毕竟比之前好了很多,下面就是我的个人理解,欢迎拍砖.指正: var x = 1 ...

  4. ubuntu处理中文时设置locale

    ubuntu下涉及中文处理的程序时,需要正确设置,否则会出现问号或者乱码的情况 具体的原因: http://wiki.ubuntu.org.cn/Locale locale的解释 http://wik ...

  5. java使用动态代理来实现AOP(日志记录)

    以下内容为原创,转载时请注明链接地址:http://www.cnblogs.com/tiantianbyconan/p/3336627.html AOP(面向方面)的思想,就是把项目共同的那部分功能分 ...

  6. 【代码笔记】iOS-底下滚动,上面标题栏也会跟着变动

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> #import "SVSegmentedCont ...

  7. 【读书笔记】iOS网络-错误处理的经验法则

    一,在接口契约中处理错误. 二,错误状态可能不正确. 设备模糊地确认操作是崇拜失败的.比如,移动应用发出HTTP请求以在两个账户间转账.请求被银行系统接收并正确地处理:然而,由于网络失败应答却丢失了, ...

  8. XML解析方案

    在iOS中,解析XML的手段有很多 苹果原生 NSXMLParser:SAX方式解析,使用简单 第三方框架 libxml2:纯C语言,默认包含在iOS SDK中,同时支持DOM和SAX方式解析 GDa ...

  9. CEF3可行性

    Chromium Embedded Framework 顾名思义,内嵌式CHROME,详细的介绍参阅 http://yogurtcat.com/posts/cef/hello-cef.html 为什么 ...

  10. Listener监听器与Filter过滤器

    1.Listener     [1]监听器简介         > Listener是JavaWeb的三大组件之一,Servlet.Filter.Listener         > Li ...