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

摘要： 關於我們 QQ答疑交流群: 600633658 我們的連結： 知乎 掘金 今日頭條 新浪微博前端網 思否 簡書 B站 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);

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