移動(dòng)端固定輸入框在底部會(huì)被鍵盤(pán)遮擋的解決方法(必看篇)
由于公司需求,需要做一個(gè)實(shí)時(shí)對(duì)話(huà)的聊天功能。遇到各種小坑就不多說(shuō)了,下面就記錄一下遇到最坑的一個(gè)問(wèn)題。。
頁(yè)面布局寫(xiě)完后,在安卓和蘋(píng)果手機(jī)測(cè)試了一下,問(wèn)題來(lái)了?。?!在安卓手機(jī)中布局完美展示(這很好),但在蘋(píng)果手機(jī)下,經(jīng)常點(diǎn)擊輸入框鍵盤(pán)會(huì)把輸入框擋住。
如下圖顯示:

圖一

圖二

圖三
(圖一和圖二都是有問(wèn)題的,圖三才是想要的效果。)
每次鍵盤(pán)遮擋住輸入框之后,必須要手動(dòng)向上滑動(dòng)一下屏幕才顯示出來(lái),這體驗(yàn)效果就很不好了吧。然后自己就嘗試了各種方法,什么定時(shí)器、絕對(duì)定位、固定定位、計(jì)算屏幕高度再定位等等,都沒(méi)有作用,鍵盤(pán)出來(lái)后還是會(huì)遮擋住。最后只能上網(wǎng)查找答案,找了半天,終于找到了答案,這里要感謝learn_shifeng。
原來(lái)只需簡(jiǎn)簡(jiǎn)單單的一句代碼就幫我解決了問(wèn)題微笑。。
下面是解決問(wèn)題的代碼:
setTimeout(function(){
document.body.scrollTop = document.body.scrollHeight;
},300);
以上這篇移動(dòng)端固定輸入框在底部會(huì)被鍵盤(pán)遮擋的解決方法(必看篇)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
iOS實(shí)現(xiàn)無(wú)限循環(huán)滾動(dòng)的TableView實(shí)戰(zhàn)教程
這篇文章主要給大家介紹了關(guān)于iOS實(shí)現(xiàn)無(wú)限循環(huán)滾動(dòng)的TableView的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-05-05
IOS 粒子系統(tǒng) (CAEmitterLayer)實(shí)例詳解
這篇文章主要介紹了IOS 粒子系統(tǒng) (CAEmitterLayer)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
OpenCV??iOS?圖像處理編程入門(mén)詳細(xì)教程
這篇文章主要介紹了OpenCV?iOS?圖像處理編程入門(mén),OpenCV?的應(yīng)用領(lǐng)域非常廣泛,包括圖像拼接、圖像降噪、產(chǎn)品質(zhì)檢、人機(jī)交互、人臉識(shí)別、動(dòng)作識(shí)別、動(dòng)作跟蹤、無(wú)人駕駛等,對(duì)于圖像處理、人機(jī)交互及機(jī)器學(xué)習(xí)算法感興趣的可以選擇一個(gè)方向進(jìn)行深入的研究2022-07-07
iOS實(shí)現(xiàn)多個(gè)彈框按順序依次彈出效果
這篇文章主要為大家詳細(xì)介紹了iOS實(shí)現(xiàn)多個(gè)彈框按順序依次彈出效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07
IOS利用CocoaHttpServer搭建手機(jī)本地服務(wù)器
這篇文章主要介紹了IOS利用CocoaHttpServer搭建手機(jī)本地服務(wù)器的步驟,幫助大家更好的理解和學(xué)習(xí)使用ios開(kāi)發(fā),感興趣的朋友可以了解下2021-04-04

