有教人做衣服的网站,制作公司简介,响应式网站 分辨率,147seo工具前言今天来公司的主要目的就是研究虚拟键盘与fixed的问题#xff0c;期间因为同事问起闭包与事件委托#xff08;阻止冒泡#xff09;相关问题#xff0c;便穿插了一篇别的#xff1a;【小贴士】工作中的”闭包“与事件委托的”阻止冒泡“#xff0c;有兴趣的朋友可以去看… 前言 今天来公司的主要目的就是研究虚拟键盘与fixed的问题期间因为同事问起闭包与事件委托阻止冒泡相关问题便穿插了一篇别的 【小贴士】工作中的”闭包“与事件委托的”阻止冒泡“有兴趣的朋友可以去看看因为首页只能放一篇这个就略去了 现在回到主要研究点首先在移动端我们点击文本框后会出现一个虚拟键盘 虚拟键盘让页面可视区域得到了充分利用但是也带来了一些问题 问题源头 移动端虚拟键盘出现的条件是文本框文本类获得焦点 但是文本框获得焦点未必会弹出键盘 收起虚拟键盘的条件是文本框失焦 PS总而言之我们认为会出现或者消失虚拟键盘的时候都可能不工作 在移动设备上如果文本框在上方点击不会有什么问题 在设备的最下面的话就有所不同了整个块会上移以将input区域显示出来 这个时候几个棘手的问题就出现了 ① 虚拟键盘的出现对页面来说是不可知的这句话的理解是没有键盘出现事件没有办法获取键盘高度 ② 键盘是“贴”在了viewport上表面上不会对dom产生“任何”影响但是这个时候一些定位元素的表现却变得“怪异” 比如 可以看到无论淘宝或者新浪这个问题都存在现在比较普遍的解决方案都是移动端不采用fixed属性 于是我们来看看是否有其它方案 iscroll是否能解决 其实这个方案在周四的时候我便测试过了但是结果让人很遗憾 作为官方给出的例子在虚拟键盘弹出来后光标会乱跑这个还可以接受但是 ① 头部不见了 ② 偶尔不能显示获得焦点的input 这两个问题就让人难以接受了于是我们需要找到其他方案 解决方案 其实这个问题如果真要较真的话我觉得需要深入研究两个知识点 ① viewport的原理 ② 虚拟键盘的原理 就我手里现有资源来说两个知识点一个都不深入所以只能先从应用层面解决问题 应用层面解决方案 我们想到这么一个场景如果我们能监控到键盘的行为如果能的话我们便可以 ① 键盘弹出时候将fixed元素设置为static ② 键盘消失时候将fixed元素设置为fixed 那么我们能吗 虽然这个方案比较恶心我们还真能......答案是监控dom变化 监控键盘 监控的方式其实筛选下来也不过两种 ① 时钟setInterval不停监控 ② 系统级别的监控比如键盘出现时候通知window一个事件但是很遗憾现在还没有这个事件但是这个事件等于 input类元素获取焦点 弹出虚拟键盘 input类元素失去焦点 收起虚拟键盘 但是我们前面已经说过上面的原则不一定可靠所以该种方案也未必可靠了 基于系统监控这点我们还可以监控resize事件或者scroll事件但是经过我的测试setInterval表现比较好 于是我们简单写一段代码可靠是否满足需求 复制代码 window.alert function (msg) { $(body).append(div msg /div) }; function fixedWatch(el) { if(document.activeElement.nodeName INPUT){ el.css(position, static); } else { el.css(position, fixed); } } setInterval(function () { fixedWatch($(#headerview header)); }, 500); 复制代码 根据测试结果来说是满足我们的需求的这里的header不会出问题但是footer由于没有处理仍然会错位 于是这个问题似乎被我们修复了但是你可以接受吗这个方案有一个致命的恶心点 不停的监控dom变化浪费资源 那么这个问题可优化么 似乎是可优化的但是依旧会带来很多问题优化的入口与出口便是input标签的focus事件 至于其失焦相关的事件便不予关注了因为可能由一个input跳到另一个input 复制代码 setTimeout(function () { $(#dl_app img).hide(); }, 100); window.alert function (msg) { $(body).append(div msg /div) }; window.res null; var i 0; function fixedWatch(el) { alert(i); if(document.activeElement.nodeName INPUT){ el.css(position, static); } else { el.css(position, fixed); if(window.res ) { clearInterval(window.res ); window.res null; } } } $(input).focus(function () { if(!window.res) { fixedWatch($(#headerview header)); window.res setInterval(function () { fixedWatch($(#headerview header)); }, 500); } }); 复制代码 这样的话貌似能让代码看上去舒服一点但是其代价却是所有input类标签都会多一个获得焦点事件依旧令人痛惜 结语 今天的学习暂时到此对于虚拟键盘的出现其实可能还有其他的问题举一个例子来说 如果我们点击按钮时候会出一个toast在中间但是虚拟键盘刚好遮住了toast提示信息怎么办呢这个问题与上述问题其实是一致的 然后这个解决方案的可接受程度以及其实际是否解决了问题又或者引起了其它问题就需要实际证明了 至于各位有什么好的解决方案或者想法可以讨论讨论哦 好了今天暂时到这里我们下次继续如果有可能我们会详细学习下viewport以及虚拟键盘相关 本文转自叶小钗博客园博客原文链接http://www.cnblogs.com/yexiaochai/p/3561939.html如需转载请自行联系原作者
