亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

手機鍵盤彈出遮蓋了表單輸入框

手機鍵盤彈出遮蓋了表單輸入框

眼眸繁星 2019-02-26 21:18:09
正常登錄頁面點擊輸入框獲取焦點后,手機的鍵盤從底部彈出,然后表單應該跟著被頂上去,但是在一些手機自帶的瀏覽器上鍵盤彈出后表單并沒有被頂上去,導致下面的密碼輸入框被鍵盤遮擋了。試過監聽window的resize事件,發現鍵盤彈出后resize事件并未觸發,也就是說頁面的高度沒有變化(innerHeight、clientHeight等等各種Height全試過了),就好像鍵盤是脫離了瀏覽器一樣。然后又嘗試通過獲取焦點來判斷鍵盤彈出,但鍵盤收起就無法判斷,因為如果用戶通過點擊鍵盤右上角的收起按鈕來收起鍵盤,輸入框并不會失去焦點。而收起按鈕又無法捕獲到。想知道前端有什么方法可以解決這個問題。PS:測試的是一加手機,在同一手機的chrome上則正常,表單被頂上去了。測試其他手機時大多數也正常(包括UC),但也有部分手機自帶瀏覽器甚至連chrome都不行。
查看完整描述

2 回答

?
婷婷同學_

TA貢獻1844條經驗 獲得超8個贊

要想實現輸入框彈上去很簡單,只需要給表單注冊獲取焦點,和失去焦點兩個事件即可。

  • 當獲取焦點(onfocus)的時候,說明需要輸入內容了,讓表單相對于整個頁面的top定位,位置自己判斷,高于輸入鍵盤高度即可。

  • 失去焦點(onblur)的時候,再讓表單恢復到原來的位置就行了

注意:

  • 這里有一個問題,就是整體頁面排版布局的問題,如果你的設計圖本身有logo之類的,你就要考慮表單彈上去的時候會不會遮擋logo,此時就不是技術上的問題了,這就需要和設計那邊溝通好了,勁量避免這種情況

  • 蘋果手機是自帶這個功能的,蘋果手機輸入的時候,表單會自動彈到輸入框的上方


查看完整回答
反對 回復 2019-03-02
  • 2 回答
  • 0 關注
  • 595 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號