由于公司需求,需要做一個實時對話的聊天功能。遇到各種小坑就不多說了,下面就記錄一下遇到最坑的一個問題。。
頁面布局寫完后,在安卓和蘋果手機測試了一下,問題來了!?。?span style="color: #ff0000">在安卓手機中布局完美展示(這很好),但在蘋果手機下,經常點擊輸入框鍵盤會把輸入框擋住。
如下圖顯示:
圖一
圖二
圖三
(圖一和圖二都是有問題的,圖三才是想要的效果。)
每次鍵盤遮擋住輸入框之后,必須要手動向上滑動一下屏幕才顯示出來,這體驗效果就很不好了吧。然后自己就嘗試了各種方法,什么定時器、絕對定位、固定定位、計算屏幕高度再定位等等,都沒有作用,鍵盤出來后還是會遮擋住。最后只能上網查找答案,找了半天,終于找到了答案,這里要感謝learn_shifeng。
原來只需簡簡單單的一句代碼就幫我解決了問題微笑。。
下面是解決問題的代碼:
setTimeout(function(){ document.body.scrollTop = document.body.scrollHeight;},300);
以上這篇移動端固定輸入框在底部會被鍵盤遮擋的解決方法(必看篇)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答