【小贴士】虚拟键盘与fixed带给移动端的痛！

前言

今天来公司的主要目的就是研究虚拟键盘与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，如需转载请自行联系原作者

【小贴士】虚拟键盘与fixed带给移动端的痛！相关推荐

虚拟键盘软键盘js插件
HTML代码 <link rel="stylesheet" type="text/css" href="style.css" /> ...
cubase5教程分享：虚拟键盘怎么用
cubase5也是大家比较喜欢的一个版本了,其中关于cubase5的教程网上也很多,在这里主要跟大家介绍一下Cubase虚拟键盘如何使用的内容. 首先在cubase5软件导入一个MIDI音频序列,在工 ...
微信小程序项目实战知识点总结(swiper组件自适应高度，自定义弹出层，悬浮按钮，虚拟键盘)...
1.小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 height:100vh; 2.微信小程序自定义弹出层,参考网址:https://blog.cs ...
小程序input调用虚拟键盘阻止系统键盘与虚拟键盘点击穿透问题
解决小程序input调用虚拟键盘并阻止调用系统键盘问题与虚拟键盘点击穿透导致下方input获焦问题点击input弹出虚拟键盘,并不调起系统键盘解决方案 wxml代码 <input type=& ...
微信小程序车牌号码输入（虚拟键盘）
近日在网上看到一位博主写的微信小程序输入车牌号(有新能源),原文链接:https://blog.csdn.net/qq706352062/article/details/105554453?ops_ ...
计算机键盘标注,你所不知道的 Windows 10 小诀窍：万能计算器、虚拟键盘、屏幕截图标注...
原标题:你所不知道的 Windows 10 小诀窍:万能计算器.虚拟键盘.屏幕截图标注 Windows 10 里面有许多好用的小功能,只是藏得很深,平常你不一定会发现它,又或者可能是并没有特别标注出来 ...
Unity 调用系统自带的虚拟键盘
说明两种方式启动了Win10自带的两种虚拟键盘. tabtip.exe 在有些系统上启动不了(不知道为啥,所以才有了第二种) 代码 using System; using System.Diagno ...
服务器端口怎么调出虚拟键盘,Win8小技巧之如何设置触控虚拟键盘
Win8小技巧之如何设置触控虚拟键盘 2013年07月08日 00:14作者:马承平编辑:马承平文章出处:泡泡网原创分享泡泡网系统工具频道7月8日经常使用笔记本录入文字的朋友一定不会想到在平板上 ...
最新win10快捷键汇总虚拟桌面Cortana小娜多任务处理键盘操作更方便
Win10已大规模推送,还没有收到升级推送win10的朋友,请按照下面微软官方提供的方法升级win10: 您可以通过Mediacreation tool.exe 升级安装Windows 10 http ...

【小贴士】虚拟键盘与fixed带给移动端的痛！

【小贴士】虚拟键盘与fixed带给移动端的痛！相关推荐

最新文章

热门文章