前言
今天來公司的主要目的就是研究虛擬鍵盤與fixed的問題，期間因?yàn)橥聠柶痖]包與事件委托（阻止冒泡）相關(guān)問題，便穿插了一篇?jiǎng)e的：
【小貼士】工作中的”閉包“與事件委托的”阻止冒泡“，有興趣的朋友可以去看看，因?yàn)槭醉撝荒芊乓黄?#xff0c;這個(gè)就略去了
現(xiàn)在回到主要研究點(diǎn)，首先在移動(dòng)端我們點(diǎn)擊文本框后會(huì)出現(xiàn)一個(gè)虛擬鍵盤， 虛擬鍵盤讓頁面可視區(qū)域得到了充分利用，但是也帶來了一些問題
問題源頭
移動(dòng)端虛擬鍵盤出現(xiàn)的條件是：文本框（文本類）獲得焦點(diǎn)
但是文本框獲得焦點(diǎn)未必會(huì)彈出鍵盤！！！
收起虛擬鍵盤的條件是：文本框失焦
PS：總而言之，我們認(rèn)為會(huì)出現(xiàn)或者消失虛擬鍵盤的時(shí)候都可能不工作
在移動(dòng)設(shè)備上，如果文本框在上方，點(diǎn)擊不會(huì)有什么問題： 在設(shè)備的最下面的話，就有所不同了，整個(gè)塊會(huì)上移，以將input區(qū)域顯示出來
這個(gè)時(shí)候幾個(gè)棘手的問題就出現(xiàn)了：
① 虛擬鍵盤的出現(xiàn)對(duì)頁面來說是不可知的，這句話的理解是：沒有鍵盤出現(xiàn)事件，沒有辦法獲取鍵盤高度
② 鍵盤是“貼”在了viewport上，表面上不會(huì)對(duì)dom產(chǎn)生“任何”影響，但是這個(gè)時(shí)候一些定位元素的表現(xiàn)卻變得“怪異”
比如：




可以看到，無論淘寶或者新浪，這個(gè)問題都存在，現(xiàn)在比較普遍的解決方案都是：移動(dòng)端不采用fixed屬性
于是我們來看看是否有其它方案
iscroll是否能解決
其實(shí)這個(gè)方案在周四的時(shí)候我便測(cè)試過了，但是結(jié)果讓人很遺憾


作為官方給出的例子，在虛擬鍵盤彈出來后，光標(biāo)會(huì)亂跑，這個(gè)還可以接受，但是：
① 頭部不見了
② 偶爾不能顯示獲得焦點(diǎn)的input
這兩個(gè)問題就讓人難以接受了，于是，我們需要找到其他方案
解決方案
其實(shí)這個(gè)問題如果真要較真的話，我覺得需要深入研究?jī)蓚€(gè)知識(shí)點(diǎn)：
① viewport的原理
② 虛擬鍵盤的原理
就我手里現(xiàn)有資源來說，兩個(gè)知識(shí)點(diǎn)一個(gè)都不深入，所以只能先從應(yīng)用層面解決問題
應(yīng)用層面解決方案
我們想到這么一個(gè)場(chǎng)景，如果我們能監(jiān)控到鍵盤的行為，如果能的話，我們便可以
① 鍵盤彈出時(shí)候?qū)ixed元素設(shè)置為static
② 鍵盤消失時(shí)候?qū)ixed元素設(shè)置為fixed
那么我們能嗎？？？
雖然這個(gè)方案比較惡心，我們還真能......答案是監(jiān)控dom變化！
監(jiān)控鍵盤
監(jiān)控的方式其實(shí)篩選下來也不過兩種：
① 時(shí)鐘setInterval不停監(jiān)控
② 系統(tǒng)級(jí)別的監(jiān)控，比如鍵盤出現(xiàn)時(shí)候通知window一個(gè)事件，但是很遺憾現(xiàn)在還沒有這個(gè)事件，但是這個(gè)事件等于
input類元素獲取焦點(diǎn) == 彈出虛擬鍵盤
input類元素失去焦點(diǎn) == 收起虛擬鍵盤
但是我們前面已經(jīng)說過，上面的原則不一定可靠，所以該種方案也未必可靠了
基于系統(tǒng)監(jiān)控這點(diǎn)，我們還可以監(jiān)控resize事件或者scroll事件，但是經(jīng)過我的測(cè)試，setInterval表現(xiàn)比較好
于是，我們簡(jiǎn)單寫一段代碼，可靠是否滿足需求：
復(fù)制代碼 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); 復(fù)制代碼 根據(jù)測(cè)試結(jié)果來說，是滿足我們的需求的，這里的header不會(huì)出問題，但是footer由于沒有處理仍然會(huì)錯(cuò)位

于是這個(gè)問題似乎被我們修復(fù)了，但是你可以接受嗎？？？這個(gè)方案有一個(gè)致命的惡心點(diǎn)！
不停的監(jiān)控dom變化，浪費(fèi)資源
那么這個(gè)問題可優(yōu)化么？
似乎是可優(yōu)化的，但是依舊會(huì)帶來很多問題，優(yōu)化的入口與出口便是input標(biāo)簽的focus事件
至于其失焦相關(guān)的事件便不予關(guān)注了，因?yàn)榭赡苡梢粋€(gè)input跳到另一個(gè)input
復(fù)制代碼 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); } }); 復(fù)制代碼 這樣的話，貌似能讓代碼看上去舒服一點(diǎn)，但是其代價(jià)卻是所有input類標(biāo)簽都會(huì)多一個(gè)獲得焦點(diǎn)事件，依舊令人痛惜
結(jié)語
今天的學(xué)習(xí)暫時(shí)到此，對(duì)于虛擬鍵盤的出現(xiàn)其實(shí)可能還有其他的問題，舉一個(gè)例子來說：
如果我們點(diǎn)擊按鈕時(shí)候會(huì)出一個(gè)toast在中間，但是虛擬鍵盤剛好遮住了toast提示信息怎么辦呢？這個(gè)問題與上述問題其實(shí)是一致的
然后這個(gè)解決方案的可接受程度，以及其實(shí)際是否解決了問題又或者引起了其它問題就需要實(shí)際證明了
至于各位有什么好的解決方案，或者想法，可以討論討論哦！！！
好了，今天暫時(shí)到這里，我們下次繼續(xù)，如果有可能我們會(huì)詳細(xì)學(xué)習(xí)下viewport以及虛擬鍵盤相關(guān)


本文轉(zhuǎn)自葉小釵博客園博客，原文鏈接http://www.cnblogs.com/yexiaochai/p/3561939.html，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者

總結(jié)

以上是生活随笔為你收集整理的【小贴士】虚拟键盘与fixed带给移动端的痛！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。