[javascript] 解決移動端手機瀏覽器軟鍵盤遮擋輸入框問題

時間 2021-02-21

標籤 css jquery 微信 this spa code blog console 欄目 JavaScript 简体版

原文原文鏈接

在手機端常常有這樣的需求 , 最下面是輸入框相似微信輸入框 , 咱們通常設置成了position:fixedcss

可是當點擊到輸入框的時候, 軟鍵盤彈出來遮擋了輸入框jquery

其實解決這個問題很是簡單 , 那就是讓body滾動到最底部 , 咱們給個滾動最大值就能夠了微信

例以下面的jquery:this

                $(window).resize(function(){

                    $('body').scrollTop(99999999);

                });

當窗口大小變化時 , 滾動到最底部 ,微信也是這樣的效果spa

$(window).resize(function(){
    var docheight = $(window).height();  /*喚起鍵盤時當前窗口高度*/
console.log(docheight,windheight);
    //_this.scrollBottom();
$('body').scrollTop(99999999);
    // if(docheight < windheight){            /*當喚起鍵盤高度小於未喚起鍵盤高度時執行*/
    //     $(".chatBoxSend").css("position","static");
    // }else{
    //     $(".chatBoxSend").css("position","fixed");
    // }});