H5 input 浮層 鍵盤遮擋

2021-10-24 12:08:29 字數 1292 閱讀 4840

這個問題,其實在前端是個老生常談的問題。

最終的解決方案其實是在攜程中使用 scrollintoviewifneeded

在比較奇葩的去哪兒使用監聽 focus,在底部加 padding 的做法。之所以不使用定位,是因為,鍵盤高度我不確定。所以我給 padding,這樣白色的區域即使大一點也可以接受。不至於出現浮層和鍵盤中間斷層。

具體的**擷取了部分。其實,主要是個思路。**自己實現更好,因為涉及到除錯,不自己寫的話,心裡也沒底。

我是使用 ts+react實現,另外,我認為盡量不要使用定位來實現,因為你不知道哪個 webview 就會出現么蛾子。當然了,定位也解決不了鍵盤遮擋的問題

!核心函式,計算 dom 位置

// 計算需要提公升的元素 : dom的位置

const movepanel = (enevt: string) => , 0);

}if (enevt === "focus") , 300);

}if (enevt === "click") , 0);}}

return settimeout(() => , 300);}}

};

首次展示的時候,觸發一次 focus

// 首次展示的時候,呼叫一次 focus

// coderef.current 代表需要 focus 的 input 元素

useeffect(() =>

return () => ;

}, [visiable, coderef.current]);

操作浮層上的 input 元素,觸發重新定位函式

// 註冊 focus, click, blur 事件

// drawerref.current 代表需要 改變定位的浮層容器

useeffect(() => );

coderef.current.addeventlistener("click", () => );

coderef.current.addeventlistener("blur", () => );

}isbindlistener = true;

return () => ;

}, [

drawerref,

drawerref.current,

coderef,

coderef.current,

isbindlistener,

]);

h5 input新增屬性

1.autofocus 頁面載入完後獲得焦點 當頁面載入時獲得焦點 autocomplete 是否顯示與現在輸入內容相匹配得歷史輸入記錄 可設定得值 no 顯示匹配的歷史輸入記錄 off 不顯示歷史輸入記錄 form 設定元素歸屬表單的id 用於宣告元素屬於哪個表單,而不關心元素在頁面哪個位置,表單...

H5 標籤屬性 input屬性

高亮文字 全部商品只要6.18 結果 加拼音文字 變bian 結果 軟換行,只試用於英文 zhe li shi ce shi wen zi,zhishiyongyuyingwen zhishiyongyuyingweninput輸入框 文字 text name username value 賬號 密...

H5系列之新input

雖說h5 新填了幾個很方便的input 型別,但是吧,想法是美好的,但是現實很殘酷,相容性不太好。基本只有google瀏覽器能用。但是既然出了,那麼就要了解他,知道有這麼乙個東西就好。input型別 color date datetime datetime local email month num...