眼眸繁星
2019-02-26 21:18:09
正常登錄頁(yè)面點(diǎn)擊輸入框獲取焦點(diǎn)后,手機(jī)的鍵盤從底部彈出,然后表單應(yīng)該跟著被頂上去,但是在一些手機(jī)自帶的瀏覽器上鍵盤彈出后表單并沒(méi)有被頂上去,導(dǎo)致下面的密碼輸入框被鍵盤遮擋了。試過(guò)監(jiān)聽window的resize事件,發(fā)現(xiàn)鍵盤彈出后resize事件并未觸發(fā),也就是說(shuō)頁(yè)面的高度沒(méi)有變化(innerHeight、clientHeight等等各種Height全試過(guò)了),就好像鍵盤是脫離了瀏覽器一樣。然后又嘗試通過(guò)獲取焦點(diǎn)來(lái)判斷鍵盤彈出,但鍵盤收起就無(wú)法判斷,因?yàn)槿绻脩敉ㄟ^(guò)點(diǎn)擊鍵盤右上角的收起按鈕來(lái)收起鍵盤,輸入框并不會(huì)失去焦點(diǎn)。而收起按鈕又無(wú)法捕獲到。想知道前端有什么方法可以解決這個(gè)問(wèn)題。PS:測(cè)試的是一加手機(jī),在同一手機(jī)的chrome上則正常,表單被頂上去了。測(cè)試其他手機(jī)時(shí)大多數(shù)也正常(包括UC),但也有部分手機(jī)自帶瀏覽器甚至連chrome都不行。
2 回答

婷婷同學(xué)_
TA貢獻(xiàn)1844條經(jīng)驗(yàn) 獲得超8個(gè)贊
要想實(shí)現(xiàn)輸入框彈上去很簡(jiǎn)單,只需要給表單注冊(cè)獲取焦點(diǎn),和失去焦點(diǎn)兩個(gè)事件即可。
當(dāng)獲取焦點(diǎn)(
onfocus
)的時(shí)候,說(shuō)明需要輸入內(nèi)容了,讓表單相對(duì)于整個(gè)頁(yè)面的top定位,位置自己判斷,高于輸入鍵盤高度即可。失去焦點(diǎn)(
onblur
)的時(shí)候,再讓表單恢復(fù)到原來(lái)的位置就行了
注意:
這里有一個(gè)問(wèn)題,就是整體頁(yè)面排版布局的問(wèn)題,如果你的設(shè)計(jì)圖本身有l(wèi)ogo之類的,你就要考慮表單彈上去的時(shí)候會(huì)不會(huì)遮擋logo,此時(shí)就不是技術(shù)上的問(wèn)題了,這就需要和設(shè)計(jì)那邊溝通好了,勁量避免這種情況
蘋果手機(jī)是自帶這個(gè)功能的,蘋果手機(jī)輸入的時(shí)候,表單會(huì)自動(dòng)彈到輸入框的上方
添加回答
舉報(bào)
0/150
提交
取消