360瀏覽器文本框得到焦點後被軟鍵盤遮罩的問題

　　場景是這樣的，站點上篩選按鈕點擊後彈出層（fixed），當輸入框獲取焦點之後彈出系統自帶的軟鍵盤，在android上十款瀏覽器挨個測試比對，發如今360瀏覽器彈出鍵盤之後獲取焦點的文本框被軟鍵盤覆蓋了。截圖以下

 

                    

  （未獲取軟鍵盤焦點的狀況）               （chrome瀏覽器調起軟鍵盤的狀況）            （360瀏覽器調起軟鍵盤狀況）

 

      那麼問題來了，瀏覽器的軟鍵盤顯示出來又哪幾種狀況呢？英文   中文（網上找的）

      通過簡單的瞭解，大概分析了一下軟鍵盤在瀏覽器上彈出應該包含軟鍵盤佔用主activity空間，讓主activity從新佈局 和 不調整窗口大小浮在上面  這兩種方式（哈哈這是我yy的）

360應該是使用後者，其餘的也許是使用前者。

 

既然問題出現了，那就要想辦法解決，因而通過簡單的推敲，基本上能夠得出（存在不佔用主窗口空間的軟鍵盤技術） 一、當input獲取焦點的時候，二、軟鍵盤會彈出，三、fixed的層須要向上移動一下，四、成功輸入；五、當input blur或是鍵盤點擊回車之後,fixed還原位置（這裏要慶幸360沒有默認帶旋轉屏幕跟隨轉動，否則還要麻煩一點）

 

既然分析完畢就要寫代碼了

 1.添加識別瀏覽器代碼

var isSpecialBrowser = navigator.userAgent.match(/360 Aphone.*\(([\d.]+)\)$/i)//360等部分軟鍵盤採用的是軟鍵盤不佔用主窗口空間形成，吸底的 input獲取焦點的時候被遮罩

2.處理事件

$(document)
    .on('keydown keyup', Element,function(ev) {
            if(code == 13 && isSpecialBrowser) {
                    DOM.css('bottom', -310);
                }
            }
           
        })
        .on('focus', Element,function() {
            if(isSpecialBrowser) {
               DOM.css('bottom', -110);
            }
        })
        .on('blur', Element,function() {
            if(isSpecialBrowser) {
                DOM.css('bottom', -310);
            }
        });

　　

好了，問題解決了

可是會又問題，就是主動點擊鍵盤收起按鈕時沒辦法獲取任何keycode和對應的事件，所以這裏會有問題。