那些IOS系統中使用Input遇到的坑

關於咱們

QQ答疑交流羣:
600633658

咱們的連接：

知乎 掘金 今日頭條 新浪微博 前端網 思否 簡書 B站

IOS 微信/支付寶 Input輸入框獲取焦點失靈

解決方案：

//在input上綁定click事件（以vue爲例）

@click.capture.stop.prevent="test($event)"

//在事件中強制獲取焦點

e.target.focus()

IOS Input彈出鍵盤後底部白條沒法復原問題

安卓沒有此類問題可是會出現根容器高度變小

解決方案：

將最外層盒子設置爲’浮動層’

Positoion: fixed;

Top: 0;

Bottom: 0;

Left: 0;

Right: 0;

IOS Input獲取焦點時頁面放大

在IOS中web最小字號爲16px，小於16px則頁面會放大

解決方案：

font-size >= 16px

IOS Input獲取焦點時頁面移動問題

Input獲取焦點時，彈出鍵盤頁面會向上滑動，當失去焦點時頁面‘表面歸位’，其實際dom卻沒有恢復, 就會致使頁面點擊錯誤！

解決方案： 失去焦點時用js 控制其返回頁面頂部

window.scrollTo(0,0);

以上問題均爲實際開發過程當中所遇，解決方案實測可用，若有錯誤，歡迎提出。若有其餘坑，歡迎分享