隨時監測螢幕大小,解決手機端小鍵盤遮擋輸入框問題

2022-03-06 16:42:55 字數 982 閱讀 2557

為什麼?

為什麼要隨時監測螢幕大小,這是因為我們在手機端的時候,常常會遇到這樣的問題:當點選輸入框的時候,手機的鍵盤就會自動浮現,它會使得頁面的可視示高度(document.body.clientheight)發生變化。而我們的輸入框就被可憐的遮擋在小鍵盤後面

怎麼辦?

我們不知道小鍵盤何時會出現,但有一點是可以確定的,當小鍵盤出現的時候,body的可視區域一定為發生變化!!當我們檢測到頁面的可視高度發生了變化,我們就可以確定手機的鍵盤出來了。於是我們就可以使用document.getelementbyid('×××××').scrollintoview();把被小鍵盤遮擋住的輸入框給上移到可視區域。

ps:結合scrollintoview()使用的還有activeelement

當我們頁面有多個input輸入框時,我們可以使用html5的輔助管理dom功能,document.activeelement屬性始終會引用dom當前獲得的焦點元素。可以獲得當前使用者焦點的元素。

document.activeelement.scrollintoview();

監測手機小鍵盤彈出**:

window.onresize = () => )()

}

當我拿到showheight,在vue裡,我就可以通過watch他的變化,然後再執行相應的邏輯**,使用vue.js完整**如下:

data() 

// 渲染後執行

mounted() )()

}},watch: ,

methods:

} else if (that.docmheight <= that.showheight)

that.timer = false;

}, 20)}}

}

獲取手機螢幕大小

通過windowmanager獲取 displaymetrics dm new displaymetrics getwindowmanager getdefaultdisplay getmetrics dm phonewidth.settext 通過windowmanager獲取的手機螢幕的寬度 d...

索愛手機螢幕大小

96 64 0 r6 p.3 u j100,j110,j120,g m7 y r2 j z y f a p y 101 80 6 k k n p n s0 8 t226,t230,t238,t290,t300,t302,t306,t310,t312,t316,t68i,y n 0 c1 i7 v j...

讓iframe自適應大小 解決方案

第一種 nl ad this.height document.frames src document.body.scrollheight 例子 1,建立頁面 test.html 頁面中含有乙個 iframe,name為 ifrname id為 ifrid,src 為 iframe.html頁面。sc...