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


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

 

                    

  (未獲取軟鍵盤焦點的情況)               (chrome瀏覽器調起軟鍵盤的情況)            (360瀏覽器調起軟鍵盤情況)

 

      那么問題來了,瀏覽器的軟鍵盤顯示出來又哪幾種情況呢?英文   中文(網上找的)

      經過簡單的了解,大概分析了一下軟鍵盤在瀏覽器上彈出應該包含軟鍵盤占用主activity空間,讓主activity重新布局不調整窗口大小浮在上面  這兩種方式(哈哈這是我yy的)

360應該是使用后者,其他的也許是使用前者。

 

既然問題出現了,那就要想辦法解決,於是經過簡單的推敲,基本上可以得出(存在不占用主窗口空間的軟鍵盤技術) 1、當input獲取焦點的時候,2、軟鍵盤會彈出,3、fixed的層需要向上移動一下,4、成功輸入;5、當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和對應的事件,因此這里會有問題。

 

   


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com