IOS微信端軟鍵盤收起後介面按鈕失效問題

2022-05-24 09:51:10 字數 2058 閱讀 8263

問題描述:

1.在vue裡封裝了乙個confirm的彈窗(即如下乙個彈窗)

3.啊~~~,驚人的發現驚人彈窗裡所有的按鈕全部失效了,一點反應都沒有

4.但是,發現只要不是使用的封裝好confirm的彈窗,而是直接寫入到頁面中內容(即使用vue slot這個的時候就不會出現這個情況)

5.於是乎,我開始查閱度娘,最終在  找到了解決方法。

綜合下解決方案:

1/**

2* js修復方法

3* @param el 需要修復元素id(#)、class(.)或html標籤字串

4* @param isselect 需要修復的元素物件是否為「select」標籤5*/

6function

jsioswechatpopformfix(el, isselect)

19 resel.addeventlistener(listenevent, function

() )22}

23 jsioswechatpopformfix('input');

24 jsioswechatpopformfix('textarea');

25 jsioswechatpopformfix('select', true);

1/**

2* jq修復方法

3* @param el 需要修復元素id(#)、class(.)或html標籤字串

4* @param isselect 需要修復的元素物件是否為「select」標籤5*/

6function

jqioswechatpopformfix(el, isselect) );13}

14 jqioswechatpopformfix('input');

15 jqioswechatpopformfix('textarea');

16 jqioswechatpopformfix('select', true);

1

2<

textarea

placeholder

="請輸入您取消的原因"

@blur

="window.scroll(0,0)"

>

textarea

>

3<

input

type

="text"

placeholder

="請輸入您取消的原因"

@blur

="window.scroll(0,0)"

/>

4<

select

@change

="window.scroll(0,0)"

>

5<

option

>1

option

>

6<

option

>2

option

>

7select

>89

10<

textarea

placeholder

="請輸入您取消的原因"

onblur

="window.scroll(0,0)"

>

textarea

>

11<

input

type

="text"

placeholder

="請輸入您取消的原因"

onblur

="window.scroll(0,0)"

/>

12<

select

onchange

="window.scroll(0,0)"

>

13<

option

>1

option

>

14<

option

>2

option

>

15select

>

ok!完美解決!

高仿微信軟鍵盤

1 支援android原生表情換ios表情 2 支援自定義表情 首先感謝以下2個開源專案 1 android表情轉ios表情 2 軟鍵盤和表情鍵盤切換防止閃動 首先看效果圖 1 支援自定表情,android表情轉換成ios 這裡 有註解,這裡唯一的難度就是把2個開源專案的功能整合在了一起,既支援自定...

js 移動端之監聽軟鍵盤彈出收起

js 移動端關於頁面布局,如果底部有position fixed的盒子,又有input,當軟鍵盤彈出收起都會影響頁面布局。這時候android可以監聽resize事件,如下,而ios沒有相關事件。解決安卓鍵盤彈出問題 var oheight document height window resize...

h5 移動端 監聽軟鍵盤彈起 收起

回車確認 btn on keypress function e document keyup function e 1.在ios中軟鍵盤彈起時,僅會引起 body scrolltop值改變,但是我們可以通過輸入框的獲取焦點情況來做判斷,但也只能在ios中採用這個方案,因為在android中存在主動收...