ios裝置的彈窗頁面,游標錯位,游標亂跳

2021-10-02 06:11:47 字數 1148 閱讀 1580

如果產品要求在移動端裡有彈窗中多個ipnut,趁早找產品溝通不要彈窗,新起頁面,此問題巨坑!巨坑!

如果產品要求在移動端裡有彈窗中多個ipnut,趁早找產品溝通不要彈窗,新起頁面,此問題巨坑!巨坑!

如果產品要求在移動端裡有彈窗中多個ipnut,趁早找產品溝通不要彈窗,新起頁面,此問題巨坑!巨坑!

一.經常是上下錯位,原因是在input 獲取焦點以後,鍵盤彈出後,會把頁面往上頂著移動,但是游標停留在了以前的位置,如果頁面不複雜,可以在獲取焦點後給body上新增 position:fixed ,使用後清除,但是這樣會引起頁面失去滾動能力,頁面中盡量使用absolute,或者是float,還有flex。

二.還有一種情況就是頁面中有了彈窗,在彈窗中有多個input(一般大於2個)標籤,會出現游標左右平移,或者游標亂跳,點了第乙個游標去了第二個,

(1)、左右平移先給input加test-align:left;無效在找別的原因

(2)、此類問題大多解決辦法都是把彈窗的fixed定位改為absolute 頁面中不要出現fixed定位

(3)、或者是新增fastclick.js庫,目前感覺此方法起不到什麼作用。。

(4)、仔細觀察頁面,可以看到頁面上的input先聚焦再滾動;也就是說,聚焦事件在頁面滾動之前或者滾動完成之前就已經完成了,所以這時候頁面滾動,而游標又不跟隨滾動,就造成了游標跳行、錯亂的問題。

解決方法:

1、輸入框在聚焦的時候,會彈起軟鍵盤;所以,我們監聽軟鍵盤彈起事件,在彈起事件後,進行dom重繪,但是這種必須要加延時處理

2、當頁面出現滾動條時,彈框彈出後,頁面回滾至頂部。在不改變原有彈框**的情況下,有效地解決游標錯位問題,但嚴重影響使用者使用,可以給彈出層重新定位:獲取滾動條高度,為彈窗重新設定top值;

3、彈框採用absolute定位後,關鍵是top值的確定ios safari 輸入鍵盤彈出時,若頁面底部被擠壓上去,則關閉彈框會復原到頁面滾動到底部時的狀態,若底部沒被擠壓上去,每彈出一次鍵盤,頁面都會上去一定距離,且不復原,可以阻止頁面的touchmove事件來實現固定底部頁面的想法,

4、總結:給input加test-align:left;把頁面所有fixed定位改為absolute,阻止頁面滾動 或者 彈出後重新渲染頁面 或者 監聽更新彈窗top值 或者 在設計時不要在彈窗裡多個input…巨坑!

vue彈窗呼叫另外的form頁面

title 子頁面 visible.sync chargestandardformopen width 750 子頁面el dialog div template export default props data computed watch created mounted methods scr...

IOS裝置上網頁中的頁面滾動效果模擬

可能咋一看不知道我說的是個啥,因為ios本來就用這功能的啊,還模擬它幹啥?先聽我說下專案背景哈 document bind touchmove function e function show time source.animation window.settimeout function x se...

ios 取裝置語言 在iOS中獲取當前的裝置語言?

所提供的解決方案實際上將返回裝置的當前區域,而不是當前選擇的語言。這些通常是一樣的。然而,如果我在北美,我把我的語言設定為日語,我的地區仍將是英語 美國 為了檢索當前選擇的語言,您可以 nsstring language nslocale preferredlanguages objectatind...