要做一個(gè)整屏的有背景色的登陸頁面，遇到的一些實(shí)現(xiàn)方法和踩過的坑記錄一下：

1.整屏有顏色的，高度不設(shè)置100%，給html，body設(shè)置背景色；

????如果設(shè)置高度100%，在部分IOS手機(jī)上，input框選中再失去焦點(diǎn)之后會(huì)沒辦法點(diǎn)擊，焦點(diǎn)在鍵盤彈起時(shí)的位置；

????如果設(shè)置固定值的高度，體驗(yàn)會(huì)不好，會(huì)上拉出現(xiàn)一節(jié)沒有內(nèi)容的頁面，也會(huì)出現(xiàn)軟鍵盤收起時(shí)出現(xiàn)白條。

2.底部有固定定位導(dǎo)航條的，軟鍵盤彈起會(huì)置于軟鍵盤上面，即固定定位相對(duì)于可視區(qū)域來定位的；

3.在IOS12+的V6.7.4+的微信上，會(huì)出現(xiàn)軟鍵盤收起時(shí)出現(xiàn)空白；

????下面針對(duì)這點(diǎn)作出的解決方法：

（1）用focus和blur來判斷鍵盤的彈出和收起狀態(tài)；

（2）由于頁面中有多個(gè)input，所以需要定義幾個(gè)flag字段來判斷頁面是否沒有focus的input，然后才將頁面滾動(dòng)到頂部；

（3）對(duì)input遍歷綁定一下focus事件，給flag賦值為true；

（4）對(duì)input遍歷綁定一下blur事件，當(dāng)所有的input都處于blur狀態(tài)，即flag都為false的時(shí)候，頁面滾動(dòng)到頂部；

（5）在blur事件中判斷flag值的時(shí)候，存在focus事件給flag賦值的異步問題，所以在blur判斷的時(shí)候加一個(gè)延遲定時(shí)器，再進(jìn)行判斷。

（6）這種通過全局設(shè)置變量的，綁定事件的時(shí)候需要用$("#...").on("click",function(){})這種方法，而不能在行內(nèi)通過onclick來設(shè)置，否則判斷全局變量值的時(shí)候會(huì)出現(xiàn)undefined的情況。

（7）代碼如下：