第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

手機(jī)鍵盤彈出遮蓋了表單輸入框

手機(jī)鍵盤彈出遮蓋了表單輸入框

眼眸繁星 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)彈到輸入框的上方


查看完整回答
反對(duì) 回復(fù) 2019-03-02
  • 2 回答
  • 0 關(guān)注
  • 594 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)